第 10 节操作内联样式

最新推荐文章于 2022-07-11 16:46:26 发布

Sunnie23

最新推荐文章于 2022-07-11 16:46:26 发布

阅读量537

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48015123/article/details/120913989

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第10节操作内联样式

操作内联样式

操作内联样式

1、通过JS修改元素的样式：
1）语法：元素.style.样式名 = 样式值

注意：
如果CSS的样式名中含有 -，这种名称在JS中是不合法的，比如 background-color。
需要将这种样式名修改为 驼峰命名法，
去掉 -，然后将 - 后的字母大写，比如backgroundColor。

2）
（1）通过style属性设置的样式都是 内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。

（2）但是，如果在样式中写了 !important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS样式失效。所以，尽量不要为样式添加 !important。

2、通过JS读取元素的样式：
1）语法：元素.style.样式名

注意：通过style属性设置和读取的都是内联样式、无法读取样式表中的样式

<!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>操作内联样式</title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
        
            //点击按钮以后，修改box1的大小 
            //  获取box1
            var box1 = document.getElementById("box1");
            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {

                // 修改box1的宽度
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "yellow";
            }

            //点击按钮2以后，读取元素的样式
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
            
            // 读取box1的样式
            alert(box1.style.backgroundColor);
            }
        }

    </script>
</head>

<body>
    <button id="btn01">点我一下！</button>
    <button id="btn02">点我一下2</button>

    <br>
    <br>

    <div id="box1"></div>

</body>

</html>

3、获取元素的当前显示的样式
1）currentStyle 属性
语法：元素.currentStyle.样式名

alert(box1.currentStyle.backgroundColor);

它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。
currentStyle 只有IE浏览器支持，其他的浏览器都不支持。

2）getComputedStyle() 方法
语法：var obj = getComputedStyle(参数1, 参数2);
（1）参数1：要获取样式的元素
（2）参数2：可以传递一个伪元素，一般都传 null

alert(getComputedStyle(box1,null).width);

该方法会返回一个对象，对象中封装了当前元素对应的样式。
可以通过 对象.样式名 来读取样式，如果获取的样式没有设置，则或获取到真实的值，而不是默认值。比如：没有设置 width，它不会获取到 auto，而是一个具体的宽度值。

其他浏览器中可以使用 getComputedStyle() 这个方法来获取元素当前的样式，这个方法是 window 的方法，可以直接使用。

注意：通过 currentStyle 和 getComputedStyle() 读取到的样式都是只读的，不能修改，如果要修改必须通过 style 属性。

3）处理兼容性
定义一个函数，用来获取指定元素当前的样式
参数：
（1） obj ----- 要获取的样式的元素
（2） name ----- 要获取的样式名

function getStyle(obj, name){
	if(window.getComputedStyle){
		//正常浏览器的方式,具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	}else{
		//IE8的方式
		return obj.currentStyle[name];
	}
}

注意：判断条件要写 window.getComputedStyle ，不能只写 getComputedStyle ，前者表示的是属性，而后者表示的是变量。属性未能找到，会返回 undefined，而变量未找到会 报错。

4、其他样式相关的属性

查找文档：HTML DOM 对象 -----> DOM Element

1）clientWidth 和 clientHeight 属性
（1）这两个属性可以获取元素的可见宽度和可见高度
（2）这些属性都是不带 px的，返回都是一个数字，可以直接进行计算。
（3）会获取元素的宽度和高度，包括内容区和内边距
（4）这两个属性是只读的，不能进行修改

2）offsetWidth 和 offsetHeight 属性
（1）获取元素的整个宽度和高度，包括内容区、内边距和边框

alert(box1.offsetWidth);

3）offsetParent
（1）可以用来获取当前元素的定位父元素
（2）会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回 body。

4）offsetLeft 和 offsetTop
当前元素相对于其定位父元素的水平偏移量和垂直偏移量

alert(box1.offsetLeft);

5）scrollWidth 和 scrollHeight
可以获取元素整个滚动区域的宽度和高度

6）scrollLeft 和 scrollTop
可以获取水平和垂直滚动条滚动的距离

7）判断滚动条是否滚动到底
（1）当满足 scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了
（2）当满足 scrollWidth - scrollLeft == clientWidth，说明垂直滚动条滚动到底了

5、练习
判断是否将协议阅读完毕

<!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>练习</title>
    <style type="text/css">
        #info {
            width: 300px;
            height: 500px;
            background-color: rgb(140, 223, 191);
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            //当垂直滚动条滚动到底时使表单项可用
            //onscroll 该事件会在元素的滚动条滚动时触发

            // 获取id为info的p元素
            var info = document.getElementById("info");
            // 获取两个表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定一个滚动条滚动的时间
            info.onscroll = function () {

                //检查垂直滚动条是否滚动到底
                //scrollHeight和scrollTop会存在小数，利用parseInt()函数对其进行取整
                if (parseInt(info.scrollHeight - info.scrollTop) == info.clientHeight) {
                    //滚动条滚动到底，使表单项可用
                    //disabled 属性可以设置一个元素是否禁用
                    // 如果设置为true，则表示元素被禁用
                    // 如果设置为false，则表示元素可用
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;

                }
            }
        }

    </script>
</head>

<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
        请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！请认真阅读以下协议，确定是否要进行注册！！
    </p>
    <!-- 如果为表单项添加disabled="disabled"，则表单项将变成不可用的状态 -->
    <input type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
    <input type="submit" value="注册" disabled="disabled">

</body>

</html>

Sunnie23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第 10 节操作内联样式

第10节操作内联样式操作内联样式操作内联样式1、通过JS修改元素的样式：1）语法：元素.style.样式名 = 样式值注意：如果CSS的样式名中含有 -，这种名称在JS中是不合法的，比如 background-color。需要将这种样式名修改为驼峰命名法，去掉 -，然后将 - 后的字母大写，比如backgroundColor。2）（1）通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。（2）但是，如果在样式中写了 !impor
复制链接

扫一扫