JavaScript获取元素样式

  • Post author:
  • Post category:java




元素:style:样式名=样式值  读取方式:元素.style.样式名

1.通过style属性设置喝读取的都是内联样式

案例:(在此和之前一样,创建HTML就省略不写了,一如既往的给出示例)

2.HTML


3.css


4.Js


获取元素内联样式属性


Js


里还可以写其他内联样式,比如:

box.style.height = “300px”


、box.style.backgroundColor = “red”


等其他内联



注意:要在点击事件代码里写,不要写在获取元素的按钮下边及script标签外的地方,不然不会生效,一定要注意


5.


获取元素的当前显示样式

语法:元素 currentStyle 属性名或元素.currentStyle[属性名],currentStyle可以用来读取当前元素正在 显示的样式,如果当前元素没有设置该样式,则获取它的默认值。例如:如果没有设置width,获取到的 值为auto

注意:

该属性只有IE支持,其他浏览器都不支持


6.


在其他浏览器中可以使用

getComputedStyle()这个方法获取当前元素的显示样式,这个方法是window的方法,可以直接使用。


7.


参数说明:



1.需要获取样式的元素

2.可以传递一个伪元素,一般都传null


8.

说明:该方法返回一个对象,对象中封装了当前元素对应的样式, var obj=getComputedStyle(element,null); //该方法的使用说明 获取元素显示样式: obj.属性名 或则 obj[“属性名”] ,如果获取的样式没有设置,则会获取到真实的值,而不是默认值。例如:如果没有设置 width,获取到的值为1200px(元素实际的值)。注意:!!!该方法不支持IE8及以下的浏览器


9.getComputeStyle()


方法与currentStyle属性都是只读的属性,不能修改属性,如果需要修改属性的值,只能使用style属性


10.



版权声明:本文为Sore4原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。