【JavaScript】DOM之样式操作

最新推荐文章于 2024-06-01 00:30:00 发布

程序员的生活1

最新推荐文章于 2024-06-01 00:30:00 发布

阅读量338

点赞数

分类专栏： web前端 js 文章标签： javascript dom

本文链接：https://blog.csdn.net/lin123_00/article/details/118737798

版权

样式操作

获取内联样式

以节点和元素的方法来获取指定的CSS样式

<body>
<div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('q1');
//    节点属性获取指定元素的属性
    var attrNode = div.getAttributeNode('style');
    var style = attrNode.nodeValue;
    console.log(style);

    var div = document.getElementById('q1');
//    元素属性获取指定的元素的属性
    var style = div.getElementById('style');
    console.log(style);


    var div = document.getElementById('q1');
    var style = div.style;
    console.log(style.width);
</script>
</body>

希望能够帮助大家，另外小编谢谢大家一如既往的支持，欢迎大家一起和群里的小伙伴一起学习，交流，群里面每天都有分享初学者的笔记资料，视频。点击进入暗号：知乎

CSS StyleDeclaration对象

以getPropertyVslue()方法通过elementstylestyleitem.getPropertyVslue()获取CSS样式属性值
该属性还具有length属性

<body>
<div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('q1');
    var style = div.style;
//    得到CSSStyleDeclaration对象
    console.log(style.cssText);
//    cssText属性；获取当前元素中所有的样式属性内容(字符串类型)
    console.log(style.length);
//    length属性；获取当前元素中样式属性的个数(不等于与设置的个数一致)
    var attrName = (style.item);
    console.log(attrName);
    console.log(style.getPropertyCSSValue(attrName));
//    getPropertyCSSValue(Name)；获取当前元素中指定属性名对应的样式属性值

    for (var attr in style) {
        console.log(attr);//遍历该对象
    }
</script>
</body>

程序猿的生活：JS实现字体逐个打印zhuanla

最低0.47元/天解锁文章

程序员的生活1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】DOM之样式操作

样式操作获取内联样式以节点和元素的方法来获取指定的CSS样式<body><div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div><script> var div = document.getElementById('q1');// 节点属性获取指定元素的属性 var attrNode = div.getAttribu
复制链接

扫一扫