javascript&dom学习（获取元素的样式）

最新推荐文章于 2023-01-05 11:34:46 发布

youknowml

最新推荐文章于 2023-01-05 11:34:46 发布

阅读量166

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yrhlyyouknow/article/details/107410613

版权

//使用dom 来操作css
<style type="text/css">
#box1{
width:200px;
height:200px;
background-color:red;

}
</style>
<script type="text/javascript">
window.onload=function(){
//点击按钮以后，修改box 1 的大小
//获取box1
var box1=document.getElementById("box1");
//为按钮绑定单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//修改box1的高度
//通过js 来修改元素的样式
//语法：元素.style.样式名=样式值；
//注意：如果是css 的样式名中含有“-”
//这种名称再js 种是不合法的比如background-color
//需要将这种样式修改为驼峰命名法
//解决方法：去掉#，然后将- 后的字母大写
//boorderTopWidth
//我们通过style 属性设置的样式都是内联样式
//而内联样式有着较高的优先级，所以通过js 修改的样式往往会立即显示
//但是如果再样式种写了!important ，则此时样式会有着最高的优先级
/*即使通过js,也不能覆盖此样式，此时将会导致js 修改演示失效
所以尽量不要为样式添加!important
*/



box1.style.backgroundColor="yellow";
box1.style.width="300px";
box1.style.height="300px";


};
//
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//读取box1的样式
//语法：
//元素.style.样式名=样式值
//注意：通过style属性设置和读取的都是内联样式
//无法读取样式表中的样式
alert(box1.style.width);


};

</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box1"></div>
</body>
</html>

<style type="text/css">
#box1{
width:100px;
height:100px;
background-color:yellow;
}
</style>
<script type="text/javascript">
var box1=document.getElementById("box1");
varb btn01=document.getElementById("btn01");
btn01.onclick=function(){
 //读取box1 的宽度
 //alert(box1.style.width);这种只能获得内联元素的
 //获取元素的当前显示的样式
 //语法：
// 元素.currentStyle.样式名
// 它可以用来读取当前元素正在显示的样式
//需要注意的是如果是当前元素没有设置该样式，则获取它的默认值
//注意的是currentStyle 只有ie 支持，其他浏览器都不支持
//在其他浏览器我们呢可以使用
/*getComputedStyle()这个方法来获去元素当前的样式
这个方法是window 的方法，可以直接使用
需要两个参数
第一个:要获取样式的元素
第二个：可以传递一个伪元素，一般都传 null
该方法会返回一个对象，该对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取得样式没有设置，则会获取到真实的值而不是默认值
比如：没有设置width ，他不会获取到auto（currentStyle会获取到auto） ，而是一个长度

但是该方法它不支持IE8 及以下浏览器

通过currentStyle和getComputedStyle读取到的样式都是只读的，不能修改。如果需要修改的话必须通过style 属性


*/
/*var obj=getComputedStyle(box1,null);
alert(obj.width);*/
//也可以直接写
var obj=getComputedStyle(box1,null).width;
//这个是正常浏览器的方式
var obj=getComputedStyle(box1,null).backgroundColor;

 alert(box1.currentStyle.width);
 //这个是IE8 的方式
 alert(box1.currentStyle.backgroundColor);
 

alert(getStyle(box1,"width"));
 
};
};
//定义一个函数，用来获取指元素的当前样式
/*
参数 obj 要获取样式的元素
name：要获取的样式名
*/



function getStyle(obj,name){

/*注意的是不能直接写if(getConputedStyle),，因为这样写的话它变成了变量，如果是ie8的话他会直接报错，所以说我们要写成window.getComputedStyle 这样的话变成了属性，属性没找到会变成undefined 就不会报错*/
if (window.getComputedStyle)
//正常浏览器的方式,就会有getComputedStyle()的方法
return getComputedStyle(obj,null)[name];
else{
//IE8 的方式,没有getComputedStyle 方法
return obj.currentStyle[name];
//或者说直接用下面的方法：
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}

</script>
<head>
<body>
<button id="btn01">点我一下</button>
<div id="box1"></div>
</body>
</html>

youknowml

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript&dom学习（获取元素的样式）

//使用dom 来操作css<style type="text/css">#box1{width:200px;height:200px;background-color:red;}</style><script type="text/javascript">window.onload=function(){//点击按钮以后，修改box 1 的大小//获取box1var box1=document.getElementById("box1");/
复制链接

扫一扫