web前端之JavaScript DOM编程艺术之CSS-DOM

最新推荐文章于 2022-07-25 17:57:23 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2022-07-25 17:57:23 发布

阅读量365

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53319524

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

JavaScript DOM编程艺术

10 篇文章 0 订阅

订阅专栏

web前端之JavaScript DOM编程艺术之CSS-DOM

1. 三位一体的网页

在浏览器中的网页主要分为三大方面：结构层、表示层、行为层
结构层：主要由HTML或XHTML之类的标记语言组成
表示层：由css负责完成
行为层：负责内容应该如何响应事件这一问题。这是由JavaScript和DOM主宰的领域。

var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    paras[i].onclick=function(){
        alert("You clicked on a paragraph.");
    }

}

2. style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
        var para=document.getElementById("example");
        alert(typeof para.nodeName);
        alert(typeof para.style);
    }
    </script>
</head>
<body>
    <p id="example" style="color:grey;font-family:'Arial',sans-serif;">
        An example of a paragraph.
    </p>
</body>
</html>

从这里我们就可以看出，nodeName属性就是一个字符串，style属性是一个对象。
alert(“The color is” + para.style.color);
通过element.style.color就能获取相应style的对应属性。

注：如果需要获取font-family等中间有”-“的属性，element.style.fontFamily应该在“-”换成驼峰来获取其相应的属性。

如果把css封装成一个文件,那么element.style.color不能获取到其相应的css值

3. 设置样式

element.style.color=”#000”；也可以通过这个来设置样式。

className属性：
你可以通过className属性获得一个元素的class属性：element.className
用className属性和赋值操作符设置一个元素的class属性：element.className=value

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之JavaScript DOM编程艺术之CSS-DOM

web前端之JavaScript DOM编程艺术之CSS-DOM1. 三位一体的网页在浏览器中的网页主要分为三大方面：结构层、表示层、行为层结构层：主要由HTML或XHTML之类的标记语言组成表示层：由css负责完成行为层：负责内容应该如何响应事件这一问题。这是由JavaScript和DOM主宰的领域。var paras=document.getElementsByTagName("p"
复制链接

扫一扫