clientWidth–用法[通俗易懂]

clientWidth–用法[通俗易懂]<!DOCTYPEhtml><html><head><title></title><metacharset=’utf-8’/><styletype=”text/css”>*{margin:0;padding:…

大家好,又见面了,我是你们的朋友全栈君。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset='utf-8'/>
    <style type="text/css">
    *{
    
    
        margin: 0;
        padding: 0;
        /*box-sizing: border-box;*/
    }
    .a{
    
    
        width: 100px;
        height: 100px;
        background-color: red;
        /*margin:30px;*/
        padding: 30px;
        border:30px solid #969696;
    }
    </style>
</head>
<body>

<section id = 's'class="a"></section>


<script type="text/javascript">
    alert('clientWidth:'+document.getElementById("s").clientWidth);
    alert('clientHeight:'+document.getElementById("s").clientHeight);
    alert('offsetWidth:'+document.getElementById("s").offsetWidth);
    alert('offsetHeight:'+document.getElementById("s").offsetHeight);
    alert('scrollWidth:'+document.getElementById("s").scrollWidth);
    alert('scrollHeight:'+document.getElementById("s").scrollHeight);
    alert('scrollTop:'+document.getElementById("s").scrollTop);
    alert('scrollLeft:'+document.getElementById("s").scrollLeft);
    alert('screenTop:'+window.screenTop);
    alert('screenLeft:'+window.screenLeft);
    alert('screen.height:'+window.screen.height);
    alert('screen.width:'+window.screen.width);
    alert('screen.availHeight:'+window.screen.availHeight);
    alert('screen.availWidth:'+window.screen.availWidth);

//innerWidth不包括border和margin
$("div").innerWidth(function(index,innerWidth){
    return Math.max(innerWidth,150);//设置内宽度为不小于150
})
$("#a").innerWidth(20);//设置内宽度为20

$(document).ready(function(){
    $("p:eq(0)").css("background-color","#dddddd");//选择器
})

$("img").attr("width");//获取属性
$("img").attr("width","180");//设置属性值
$("img").attr({width:"50",height:"80"});
$(this).find("input[type=radio]").attr("checked",true);

// join() 方法用于把数组中的所有元素放入一个字符串。
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/rysly/p/clientWidth_usage.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163024.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月22日 下午5:00
下一篇 2022年7月22日 下午5:16


相关推荐

  • java定时任务实现的几种方式注解(JAVA定时任务)

    摘要:在开发测试工具的应用后台,经常听到同事说要做个定时任务把做日志处理,或者数据清理,包括做些复杂的业务计算逻辑,在选择定时任务的时候,怎么能够快速实现,并且选择一种更适合自己的方式呢?我这里把定时任务的实现收集整理了一些方法,希望可以帮到刚开始做定时任务的同学,写得不对的地方请指正。一在开发测试工具的应用后台,经常听到同事说要做个定时任务把做日志处理,或者数据清理,…

    2022年4月14日
    780
  • [Crypto]ECB模式攻击

    [Crypto]ECB模式攻击ECB 模式攻击原理 参考 https zachgrace com posts attacking ecb ecb 模式使用相同的 key 分块对明文分别进行加密 相同的明文获得相同的密文输出 nbsp 根据这一特性 可以构造如下数据进行攻击 nbsp 首先输入 blocksize 1 的填充 这样未知字符串的第一个字符将落到填充块的最后一个字节 nbsp nbsp XXXXXXAA nbsp AAAAAAAA nbsp AAAAAA

    2026年3月17日
    2
  • OpenClaw 实战技巧集锦:从自动化工作流到智能进化

    OpenClaw 实战技巧集锦:从自动化工作流到智能进化

    2026年3月13日
    3
  • intercept用法_俄大使称加拿大新制裁仅具象征性

    intercept用法_俄大使称加拿大新制裁仅具象征性“斜率”参数(w,也叫作权重或系数)被保存在coef_属性中,而偏移或截距(b)被保存在intercept_属性中L1正则化时,可以通过coef_中不等于0的个数来确定使用了几个特征np.sum(lasso.coef_!=0)…

    2025年5月31日
    5
  • python基础(7)内置函数divmod用法

    python基础(7)内置函数divmod用法前言我们都知道,python中//代表整数运算中的取整,%代表整数运算中的取余,那么有什么函数可以同时取到整数和余数吗?答案是有的,使用python内置函数divmoddivmod首先看一下源

    2022年8月7日
    5
  • 某些软件点击导出时出现NavigationCancelled错误解决方法

    某些软件点击导出时出现NavigationCancelled错误解决方法原因一般是由于http页面跳转到https页面或者反之的情形造成IE浏览器判定为安全隐患,所以终止打开页面。解决方法:1.打开Internet属性窗口,可以由以下三种方法打开。三种方法任选其一a)打开IE浏览器,点击“工具”或者右侧齿轮图标,选中“Internet选项”b)运行中,输入“inetcpl.cpl”,回车,如下图c)在控制面板中,选中“Internet选…

    2022年7月26日
    11

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号