stylesheet是什么意思lesheet在线翻译读音

CSS详解（Element中style属性，伪元素，StyleSheet对象）

⽬录

CSS与JavaScript是两个有着明确分⼯的领域，前者负责页⾯的视觉效果，后者负责与⽤户的⾏为互动。但是，它们毕竟同属⽹页开发的前

端，因此不可避免有着交叉和互相配合。本节介绍如果通过JavaScript操作CSS。

1HTML元素的style属性

操作Element节点的CSS样式，最简单的⽅法之⼀就是使⽤节点对象的getAttribute⽅法、setAttribute⽅法和removeAttribute⽅法，读

写或删除HTML元素的style属性。

ribute(\'style\',

\'background-color:red;\'

+\'border:1沸腾的反义词 pxsolidblack;\');

2Element节点的style属性

2.1基本⽤法

Element节点本⾝还提供style属性，⽤来操作CSS样式。

style属性指向⼀个对象，⽤来读写页⾯元素的⾏内CSS样式。

vardivStyle=elector(\'div\').style;

oundColor=\'red\';

=\'1pxsolidblack\';

=\'100px\';

=\'100px\';

oundColor//red

//1pxsolidblack

//陛下请自重 100px

//100px

从上⾯代码可以看到，style对象的属性与CSS规则名⼀⼀对应，但是需要改写。具体规则是将横杠从CSS属性名中去除，然后将横杠后的

第⼀个字母⼤写，⽐如background-color写成backgroundColor。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符

串“css”，⽐如float写成cssFloat。

注意，style对象的属性值都是字符串，⽽且包括单位。所以，不能设置为100，⽽要设置为\'100px\'。

2.2cssText属性

style对象的cssText可以⽤来读写或删除整个style属性。

t=\'background-color:red;\'

+\'border:1pxsolidblack;\'

+\'height:100px;\'

+\'width:100px;\';

注意，cssText对应的是HTML元素的style属性，所以不⽤改写CSS属性名。

2.3CSS模块的侦测

CSS的规格发展太快，新的模块层出不穷。不同浏览器的不同版本，对CSS模块的⽀持情况都不⼀样。有时候，需要知道当前浏览器是否⽀

持某个模块，这就叫做“CSS模块的侦测”。

⼀个⽐较普遍适⽤的⽅法是，判断某个DOM元素的style对象的某个属性关于中秋节的诗句有哪些? 值是否为字符串。

ionName===\'string\';

orm===\'string\';

如果该CSS属性确实存在，会返回⼀个字符串。即使该属性实际上并未设置，也会返回⼀个空字符串。如果该属性不存在，则会返回

undefined。

[\'maxWidth\']//\"\"

[\'maximumWidth\']//undefined

需要注意的是，不管CSS属性名带不带连词线，style对象都会显⽰该属性存在。

[\'backgroundColor\']//\"\"

[\'background-color\']//\"\"

所有浏览器都能⽤这个⽅法，但是使⽤的时候，需要把不同浏览器的CSS规则前缀也考虑进去。

varcontent=mentById(\"content\");

[\'webkitAnimation\']===\'string\'

这种侦测⽅法可以写成⼀个函数。

functionisPropertySupported(property){

if()returntrue关于国庆节的好词好句 ;

varprefixes=[\'Moz\',\'Webkit\',\'O\',\'ms\',\'Khtml\'];

varprefProperty=(0).toUpperCase()+(1);

for(vari=0;i<;i++){

if((prefixes[i]+prefProperty))returntrue;

}

returnfalse;

}

isPropertySupported(\'background-clip\')

//true

2.4setPropertyValue()，getPropertyValue()，removeProperty()

style对象的以下三个⽅法，⽤来读写⾏内CSS规则

setPropertyValue(propertyName,value)：设置某个CSS属性。

getPropertyValue(prop长篇睡前故事5000字 ertyName)：读取某个CSS属性。

removeProperty(propertyName)：删除某个CSS属性。

这三个⽅法的第⼀个参数，都是CSS属性名，且不⽤改写连词线。

pertyValue(\'background-color\',\'red\');

pertyValue(\'background-color\');

Property(\'background-color\');

3CSS伪元素

CSS伪元素是通过CSS向DOM添加的元素，主要⽅法是通过“:before”和“:after”选择器⽣成伪元素，然后⽤content属性指定伪元素

的内容。

\":before\"伪元素可以在元素的内容前⾯插⼊新内容。

\":after\"伪元素可以在元素的内容之后插⼊新内容。

以如下HTML代码为例。

Testcontent