前端开发之html属性style对象获取和设置行内样式

1.html属性style属性设置

style是一个对象,只能获取行内样式(写在一行中),不能获取内嵌的样式(写在head的style中)外链的样式(写在css文件中)

相当于在html中设置css:  只适用于简短的属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 6px solid red;
        }
    </style>
</head>
<body>

    <div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>

    <script>
        var box1 = document.getElementsByTagName("div")[0];

        console.log(box1.style.backgroundColor);
        console.log(box1.style.border);  //没有打印结果,因为这个属性不是行内样式
        console.log(typeof box1.style);  //因为是对象,所以打印结果是Object
        console.log(box1.style);         //打印结果是对象
    </script>
</body>
</html>

 


通过 js 读取元素的样式

语法:(方式一)

    元素.style.样式名

备注:我们通过style属性读取的样式都是行内样式

语法:(方式二)

    元素.style["属性"];  //格式

    box.style["width"];  //举例

方式二最大的优点是:可以给属性传递参数。

# 通过 js 设置元素的样式

语法:

    元素.style.样式名 = 样式值;

举例:

    box1.style.width = "300px";
    box1.style.backgroundColor = "red"; // 驼峰命名法

备注:我们通过style属性设置的样式都是行内样式,而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important,则此时!important会有更高的优先级。


style属性需要注意以下几点:

1)样式少的时候使用。

(2)style是对象。我们在上方已经打印出来,typeof的结果是Object。

(3)值是字符串,没有设置值是“”。

(4)命名规则,驼峰命名。

(5)只能获取行内样式,和内嵌和外链无关。

(6)box.style.cssText = “字符串形式的样式”。

cssText这个属性,其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上,举例:

    <script>
        var box1 = document.getElementsByTagName("div")[0];

        //通过cssText一次性设置行内样式
        box1.style.cssText = "width: 300px;height: 300px;background-color: green;";

        console.log(box1.style.cssText);   //这一行更加可以理解,style是对象

    </script>

打印结果:


style的常用属性

style的常用属性包括:

  • backgroundColor

  • backgroundImage

  • color

  • width

  • height

  • border

  • opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))

注意DOM对象style的属性和标签中style内的值不一样,因为在JS中,-不能作为标识符。比如:

  • DOM中:backgroundColor

  • CSS中:background-color


具体例子应用实现:style的例子实现在中间开始

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值