clientWidth-用法[通俗易懂] - 全栈程序员必看

clientWidth–用法[通俗易懂]

全栈程序员-用户IM • 2022年7月22日下午5:16 • 未分类

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

<!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>