JavaScript是如何改变元素的样式

js可以操作元素的表现元表现样式 ,但是并不是能直接操作样式表,而是改变元素的属性从而做到改变样式

js操作元素样式:

通过style属性

元素对象名.style.样式名=“样式值”//添加或者修改
元素对象名.style.样式名=""//删除样式
注意:
以上操作,操作的是HTML的style属性声明中的行类样式样式。而不是其他css代码域中的样式。

我们先在页面上创建一个绿色的div

  div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
<div></div>

在这里插入图片描述
获取该div元素 把宽度和背景颜色改变
改变元素的样式

 var div = document.getElementsByTagName("div")[0];
        div.style.width = "200px";
          div.style.backgroundColor = "red";

在这里插入图片描述
注意css中 background-color在js中换成了小驼峰的写法

上面可以看出改变的是元素的属性没有操作css样式表
在这里插入图片描述
发生改变的原因是因为其属性都是行内样式.优先级比外部样式和内部样式的优先级要高
删除属性 。通过这个方法删除的只是行类属性不能改变css样式表中的值

div.style.backgroundColor = "";
        div.style.width = "";
        div.style.height = "";

在这里插入图片描述

通过className

元素对象名.className=“新的值”//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。
该方法是通过对class属性的增加或者删除来改变样式

div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box {
            background-color: red;
        }
        .border {
            border: 1px solid royalblue;
        }
        .width {
            width: 150px;
        }
 <div>
   </div>

给元素添加一个 box的class名

    var div = document.getElementsByTagName("div")[0];
       div.className = "box";

在这里插入图片描述
删除所有的class名

div.className = "";

在这里插入图片描述
因为div.className 的值为字符串所有可以这样操作
div.className = “类名1 类名2”;
一次赋值多个class名中间用空格隔开

通过classlist对class属性的操作

length 长度
item()(也可以用方括号语法):取得每个元素
add():将给定的字符串值添加到列表中。如果值已经存在,就不添加。
contains():表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove():从列表中删除给定的字符串。
toggle():如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。

//添加" border "类
div. classList.add("border" );

在这里插入图片描述

//删除"border"类
div. classList.remove("border");

在这里插入图片描述

//切换"width"类 当class中有这个类名的时候执行删除 否则添加
div.classList.toggle("width");

以上代码能够确保其他类名不受此次修改的影响

//确定元素中是否包含既定的类名
div. classList. contains("width")
//迭代类名
for (var i=0, len=div. classList.length; i < len; i++){
console.log(div. classList[i]);
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值