JS之ClassName属性使用

Ocean 发布于2019-04-23 13:09 / 2634人阅读

摘要：而且每添加或修改脚本的代码量远大于我们修改样式的代码量。所以与其使用直接改变某个元素的样式不如通过代码去更新这个元素的属性。

一、style与className属性的对比

在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。

所以与其使用DOM直接改变某个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。

下面通过代码来比较这两种方式的差别:

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.style.fontWeight = "bold";
        ele.style.fontSize = "1.2em";
    }
}

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.className="change";
    }

css样式表
.change{
font-weight:bold;
font-size:1.2em;
}

假设我们这个需要给这个效果加上一个

上面这种做法需要在js里面加如下代码:

ele.style.backgroundColor="blue";

而第二种做法则只要在样式表里加一个样式就可以实现,而且实现了样式与行为的分离,还减少了我们的代码量,所以在后期需求不确定的情况下,我建议第二种方法来动态的修改元素的样式。

二、追加class类名

但是通过className设置元素的样式也有一个缺陷,那就是通过className设置元素的class属性时将替换(而不是追加)该元素原有的class属性,在实际开发中往往很多时候我们需要追加class；

所以根据这个需要我们可以自定义一个方法来实现追加className的效果代码如下:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

云服务器 GPU云服务器 className 云服务器多人独之使用 js 更改属性 js数据属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1491.html

jquery梳理之属性操作

摘要：与元素属性原生对于元素的属性有三种方法来操作为元素添加属性名和属性值获取元素属性值删除元素属性而则将以上三个操作简化为和对应对应对应上述的为属性名，为属性值对于需要设置多个属性时，采用的方式是在方法传入属性配置对象元素值属性三个方法都 attr与removeAttr - 元素属性 JS原生对于元素的属性有三种方法来操作 dom.setAttribute(name , value) //...

silencezwm 2019-08-21 16:41 评论0 收藏0
vue之插件编写

摘要：插件分类插件通常会为添加全局功能，插件的编写方法一般分为类，如上图所示的插件应当有一个公开方法。前言前段时间看到黄轶老师的一篇文章感触颇多。特别是下面这一段话插件 Vue 化引发的一些思考这篇文章我不仅仅是要教会大家封装一个 scroll 组件，还想传递一些把第三方插件（原生 JS 实现）Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 XX 效果如何用 Vue....

xuexiangjys 2019-08-21 17:04 评论0 收藏0
读 Zepto 源码之样式操作

摘要：方法也在读源码之内部方法有过分析。不太明白为什么要用全局变量来接收，用局部变量不是更好点吗保存当前类的字符串，使用函数获得。这是的依然是全局变量，但是接收的是当前元素的当前样式类字符串为什么不用局部变量呢。这篇依然是跟 dom 相关的方法，侧重点是操作样式的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为...

snowell 2019-08-21 11:43 评论0 收藏0
如何把 alibaba Rax 组件转换到 React 下

摘要：如何转换知道了二者的不同，那么如何转换我们也就有方向了。因为下每个元件本身就是一个普通的组件，我们可以通过直接把他们当作其他组件转换为的代码来使用。至于如何把这个放到上，我们放到后面一起说。背景最近接手公司的一个移动端项目，是通过 Rax 作为 dsl 开发的，在发布的时候构建多分代码，在 APP 端编译为能够运行在 weex 上的代码，在 H5（跑在浏览器或者 webview 里面...

Hydrogen 2019-08-26 10:56 评论0 收藏0
微信小游戏体验之打飞机改造计划

摘要：微信小游戏推出已有几天了，这个功能对小程序和小游戏的推动影响不用多说，大家赶紧摩拳擦掌往上撸就可以了。打飞机小游戏使用无模式创建一个微信小游戏后可以看到官方，其中入口文件和配置文件和。微信小游戏推出已有几天了，这个功能对小程序和小游戏的推动影响不用多说，大家赶紧摩拳擦掌往上撸就可以了。关于如何开发官方文档已经说明了，这篇则是对官方的打飞机demo一些小改造。开发预备式下载最新版...

dongfangyiyu 2019-08-21 18:33 评论0 收藏0