教你js对象删除某个元素 js获取类名的3种方法

文章插图
本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
JavaScript也可以针对CSS进行编程，也就是所谓的脚本化CSS；通过脚本化CSS，同样可以达到一系列的视觉效果；
在HTML中定义样式的方式有3种：通过<link>元素包含外部样式表文件、使用<style>元素定义嵌入式样式、以及使用style特性定义特定元素的内联样式；
DOM2级样式模块围绕这3种应用样式的机制提供了一套API，可以检测浏览器支持DOM2级定义的CSS能力；
var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");脚本化内联样式：
脚本化CSS最简单直接的方式就是更改文档元素的style属性；任何支持style特性的HTML元素在Javascript中都有一个对应的style属性，这个style属性比较特殊，它不是字符串，而是一个CSSStyleDeclaration对象，包含着通过HTML的style特性指定的所有样式信息，但不包含从外部样式表或嵌入样式表经层叠而来的样式；
var mydiv = document.getElementById("mydiv");console.log(mydiv.style);// CSSStyleDeclarationmydiv.style.fontSize = "24px";mydiv.style.color = "purple";style属性作为CSSStyleDeclaration对象，其就代表了内联样式，其保存了所有的样式属性，但如果元素没有设置style特性或没有使用脚本设置该特性，style中的样式属性值均为空字符串；
只要取得一个有效的DOM元素的引用，就可以随时使用Javascript为其设置样式；
var myDiv = document.getElementById("myDiv");myDiv.style.backgroundColor = "red";myDiv.style.width = "100px";myDiv.style.height = "200px";myDiv.style.border = "1px solid black";以这种方式改变样式时，元素的外观会自动被更新；
通过style对象，同样可以取得style特性中指定的样式；
var mydiv = document.getElementById("mydiv");console.log(mydiv.style.backgroundColor);console.log(mydiv.style.width);console.log(mydiv.style.height);脚本化的CSS属性的名称和值：
在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性；对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式，才能通过js来访问，如：
CSS属性 JS属性background-imagestyle.backgroundImagecolor style.colordisplay style.displayfont-family style.fontFamily
多数情况下，都可以通过简单地转换属性名的格式来实现转换，但是，当一个CSS属性名在Javascript中如果是保留字或关键字时，在其前加”css”前缀，例如float属性，由于float是JS中的保留字，因此不能被用作属性名，其值应为cssFloat；低版本IE支持styleFloat；
mydiv.style.backgroundColor = "purple";mydiv.style.borderRightStyle = "solid";mydiv.style.borderRightColor = "green";mydiv.style.cssFloat = "left";mydiv.style.styleFloat = "left";通过CSSStyleDeclaration对象设置style属性值时，值都应该是字符串，都应该放到引号内，并且不带分号；
在标准模式下，所有度量值都必须指定一个度量单位；在混合模式下，可以省略单位；
mydiv.style.width = 300;// 错误，但在混杂模式下默认为300pxmydiv.style.width = "300";// 错误，但在混杂模式下默认为300px通过计算得来的值，也要在最后加上单位；
var x = 10, leftMargin=20, leftBorder=10;mydiv.style.left = (x + leftMargin + leftBorder) + "px";带单位唯一不好的地方就是，如果要获取这个值，参与其他的数学运算，因为其是字符串，所以不能直接使用，必须转换为数值才能参与运算，例如使用parseInt()或parseFloat()等方法进行转换；

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：