通过Javascript:问题获取/设置CSS属性值 [英] Get/Set CSS property values via Javascript: questions

查看:129
本文介绍了通过Javascript:问题获取/设置CSS属性值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有些事情对我不清楚:

  var myDiv = document.getElementById(myDiv); 
var computedStyle = window.getComputedStyle(myDiv);

1)如果只有一个div,不可能直接获得div的全局边框颜色颜色,每侧相同:

  computedStyle.getPropertyValue(border-color); 

而不是:

  computedStyle.getPropertyValue(border-left-color); 

  computedStyle.getPropertyValue(border-right-color); 

  computedStyle.getPropertyValue(border-top-color); 

...



在CSS文件中具有样式属性,它们只能通过getComputedStyle方法访问,而不能通过样式属性定义inline,通过div中的样式属性,我是对吗?

  myDiv.style.getPropertyValue(border-left-color); 

这将无法使用。



3 )如果我们要设置一个style属性,我们必须使用元素的style属性,是不是可以使用计算的style对象?

  computedStyle.setProperty(border-color,yellowgreen,null); 

我认为使用style属性是旧方法,就像使用内联样式属性或使用object.style.property =value在Javascript中设置样式属性。



感谢。



jsFiddle: http://jsfiddle.net/pgtFR/12/

解决方案


1)如果只有一种颜色,则不可能直接获得div的全局边框颜色对于每一边:


是的,可以通过使用简写属性名称来获取计算的样式。我尝试了您在 jsfiddle 和computedStyle.getPropertyValue(border-color)上分享的示例返回(265,65,0),它是预期的橙色的rgb代码。


2)当在CSS文件中具有样式属性时,它们只能通过getComputedStyle方法访问,而不是通过样式属性定义inline,通过div中的style属性,我是对吗?


是的。 getComputedStyle在应用外部,内部和内联样式规则后返回浏览器的最终计算所得样式值。 .style属性只引用元素的内联样式。


3)如果我们想设置一个样式属性,元素的样式属性,是否不可能使用计算的样式对象?


否。根据此文档,getComputedStyle返回一个只读的CSSStyleDeclaration对象。 / p>

Some things are unclear to me:

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

computedStyle.getPropertyValue("border-color");

Instead of doing:

computedStyle.getPropertyValue("border-left-color");

OR

computedStyle.getPropertyValue("border-right-color");

OR

computedStyle.getPropertyValue("border-top-color");

...

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

myDiv.style.getPropertyValue("border-left-color");

This will not work.

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

computedStyle.setProperty("border-color", "yellowgreen", null);

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

Thanks.

jsFiddle: http://jsfiddle.net/pgtFR/12/

解决方案

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

Yes, its possible to get the computed style by just using the shorthand property name. I tried the example you have shared on jsfiddle and computedStyle.getPropertyValue("border-color") does return (265,65,0) which is the rgb code for orange as expected.

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

Yes. getComputedStyle returns the final computed style value by the browser after applying external, internal and inline style rules. .style attribute only refers to the inline style for the element.

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

No. According to this document, getComputedStyle returns a CSSStyleDeclaration object which is read-only.

这篇关于通过Javascript:问题获取/设置CSS属性值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆