JavaScript学习(十五)—内部样式与外部样式的修改与设置

(一)、行内样式

  • 获取方式:元素节点.style.CSS属性名称;

  • 注意:如果CSS属性中包含"-",那么需要采用驼峰命名法,如div.style.fontSize

  • 设置样式:元素节点.style.CSS属性名称=属性值

  • 注意:如果元素身上已经有了CSS属性,那么表示修改,如果没有表示添加

cssText属性

  • 作用:获取行内样式(指将style属性后面的所有的行内样式一字符串的形式返回),也可以用它来设置行内样式。
  • 获取格式:元素节点.style.cssText=‘属性名称:属性值;属性名称:属性值…’
  • 注意:如果CSS属性中包含"-",那么不需要采用驼峰命名法,另外不需要设置的样式采用默认值

(二)内部样式与外部样式的获取

a)谷歌浏览器(除了降低版本IE):window.getComputedStyle方法获取

  • 格式:window.getComputedStyle(元素节点,null).CSS属性名称;

b) IE浏览器(IE8以及IE8以下的版本):元素节点.currentStyle属性名称;

  • 格式: 元素节点.currentStyle.CSS 属性名称;

(三)内部样式与外部样式的获取

  • 元素节点.style.CSS属性名称=属性值
  • 注意:如果元素身上已经有了CSS属性,那么表示修改,如果没有表示添加

案例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            color: red;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div id="box">hello </div>
    <script>
        //定义一个函数,功能是获取内部外部样式,可以在谷歌浏览器或者是IE浏览器下面都执行
        function getStyle(ele, cssName) {
            if (ele.currentStyle == undefined) {
                //谷歌浏览器
                return window.getComputedStyle(ele, null)[cssName];
            } else {
                return ele.currentStyle[cssName]
            }
        }

        var div = document.getElementById('box');
        var res = getStyle(div, 'font-size');

        console.log(res);


        //修改元素的文本颜色
        div.style.color = 'blue';
    </script>
</body>

</html>

在这里插入图片描述

点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部