精华内容
下载资源
问答
  • 列举所有的方式,看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
  • js 设置class

    千次阅读 2009-04-27 15:00:00
    今天遇见了需要动态给一个Div设置样式.然后发现 居然使用document.getElementById("divID").class="mydivclass";居然不行于是没有办法啦,就上网看了一下.原来需要指定的是classsname而不是class于是:document....

    今天遇见了需要动态给一个Div设置样式.

    然后发现 居然使用

    document.getElementById("divID").class="mydivclass";

    居然不行

    于是没有办法啦,就上网看了一下.原来需要指定的是classsname而不是class

    于是:

    document.getElementById("divID").className="mydivclass";就成功了

    哎 js控制还是有些麻烦呀

    展开全文
  • Vue中设置class类样式

    千次阅读 2020-05-23 19:56:13
    vue通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象 vue中class类样式的4种绑定方式 1、数组 <h1 :class="['thin','red','italic','...

    vue中class类样式的4种绑定方式

    1、数组

    <h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>
    

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vueApp</title>
        <style>
            .red {
                color: red;
            }
    
            .thin {
                font-weight: 200;
            }
    
            .italic {
                font-style: italic;
            }
    
            .active {
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isActive: false
                },
                methods: {
    
                }
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    可以发现:class="[‘thin’,‘red’,‘italic’,‘active’]"的写法和class="thin red italic active"的效果时一样的,甚至更加繁琐

    2、三元表达式

    <h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗,他又大又圆!</h1>
    

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vueApp</title>
        <style>
            .red {
                color: red;
            }
    
            .thin {
                font-weight: 200;
            }
    
            .italic {
                font-style: italic;
            }
    
            .active {
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗,他又大又圆!</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isActive: false
                },
                methods: {
    
                }
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    可以看出在数组的基础上可以添加三元表达式,类的存在和data中数据的true/false进行绑定,从这个角度上来说,使用数组的方式虽然繁琐,但是功能还可以接受。

    3、数组嵌套对象

    <h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗,他又大又圆!</h1>
    

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vueApp</title>
        <style>
            .red {
                color: red;
            }
    
            .thin {
                font-weight: 200;
            }
    
            .italic {
                font-style: italic;
            }
    
            .active {
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗,他又大又圆!</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isActive: false
                },
                methods: {
    
                }
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    可以看出,在数组中嵌套对象和三元表达式的方法区别不大,使用的符号更多,更不利于记忆,但是方便阅读。

    4、直接使用对象

    <h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗,他又大又圆!</h1>
    

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vueApp</title>
        <style>
            .red {
                color: red;
            }
    
            .thin {
                font-weight: 200;
            }
    
            .italic {
                font-style: italic;
            }
    
            .active {
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗,他又大又圆!</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isActive: false,
                    classObj: {}
                },
                methods: {
    
                }
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    可以看出,直接使用对象的方式,每个类都要判断false/true,代码量很大,但是阅读起来最直观,并且可以将对象放到data中。

    <body>
        <div id="app">
            <h1 :class="classObj">你看这个碗,他又大又圆!</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isActive: false,
                    classObj: {
                        red: false,
                        italic: true,
                        active: true,
                        thin: true
                    }
                },
                methods: {
    
                }
            });
        </script>
    </body>
    

    综上所述,从可读性和操作行的角度上来说,更加推荐直接使用对象的方式进行class类样式的设置。如果class类不经常变化,没有必要使用Vue通过属性绑定为元素设置class类样式的方式进行样式设置。

    展开全文
  • dom元素的内容在js文件定义和初始化的情况 外层双引号,内层用单引号将动态css包含: 例如:statusimg为变量 var  statusimg = ‘’; var html += '<div id="stateClass" class="singleico monitor-...

    仅限:dom元素的内容在js文件中定义和初始化的情况

    外层双引号,内层用单引号将动态css包含:

    例如:statusimg为变量

    var statusimg = ‘’;

    var html += '<div id="stateClass" class="singleico monitor-'+statusimg+'"></div>'


    $("#"+id).html(html);

    最后生成:

    <div id="stateClass" class="singleico monitor-konw"></div>\

    <div id="stateClass" class="singleico monitor-invalid"></div>\

    展开全文
  • ``` .txt{ font-size:55px;} ...function setClass() ... <td class='' id="tt11">测试js控制css样式 </a> ``` 如果能打开浏览器是js的 setclass生效呢,用window.onload怎么写,不用的话怎么写,
  • javascript中class的用法

    千次阅读 2020-07-18 16:20:52
    js中class和java的class是差不多,相当于把具体的问题抽象成一个类去处理,应用场景,后台传来一组数据,假设是考试信息,有时间,有地点,有科目。 我们可以抽象处理一个类 class Test { id: number | null = ...

    class

    js中的class和java的class是差不多,相当于把具体的问题抽象成一个类去处理,应用场景,后台传来一组数据,假设是考试信息,有时间,有地点,有科目。
    我们可以抽象处理一个类

    class Test {
      id: number | null = null;
      name: string | null = null;
      time: string | null = null;
      /** 构造方法 */
      public constructor(obj?: object) {
        Object.assign(this, obj);
      }
      getTime() {
        return this.time;
      }
      static staticMethod(){
      	console.log('静态方法,不用实例化就可以调用了')
    	}
    }
    Test.staticMethod() /** 静态方法直接就可以调用 */
    /** 将类用new 实例化一个对象去操作就方法很多 */
    const t = new Test({ id: 1, name: 'java', time: '2020年7月18日16:13:29' });
    console.log(t);
    console.log(t.getTime());
    

    在这里插入图片描述

    展开全文
  • JavaScript class 的方法默认不会绑定 this 在 JavaScript class 的方法默认不会绑定 this!!!!!!!!!!!!!!
  • js获取和设置DIV元素class值的方法

    千次阅读 2019-10-10 18:14:15
    这篇文章就来说一说,javascript 如何获取和设置div元素class属性的值的方法。 js获取元素class属性值的方法 原生js如果想要获取div元素class属性的值,需要用到 className 方法 示例代码: <div id="moc...
  • js中class基本语法

    万次阅读 多人点赞 2019-07-10 17:33:54
    JavaScript 语言,生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + ...
  • JS中Class类的详解

    千次阅读 多人点赞 2019-04-25 09:43:56
        在ES6class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。     类实际上是个“特殊的函数”,就像你能够...
  • javascript中的setAttribute()浏览器的兼容性问题 1.element要用getElementById or ByTagName来得到, 2.setAttribute("class", vName)中class是指改变"class"这个属性,所以要带引号。 3.IE要把class...
  • JS中Class类的继承

    千次阅读 多人点赞 2019-04-25 14:26:29
    Class继承     Class 可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多 class Animate { constructor() { // 默认返回实例对象 this } } class Dog extends ...
  • js中关于class类的关键字的使用

    千次阅读 2019-12-18 20:21:58
    js中关于class类的关键字的使用 1、什么是类? 这里我们可以理解类是一个具有相同属性和行为的群体的集合。在es6,首次引入了类的概念,通过创建class关键字来定义一个类的模板。 2、在js中实现创建一个Class...
  • js中用setAttribute为标签设置class属性

    千次阅读 2007-10-26 00:32:00
    今天用js动态的为标签设置class属性,达到应用不同的class标签来显示不同的样式~发现在IE6和FF下添加class是有些区别的。其基本语法使用如下:object.setAttribute(sName, vValue [, iFlags])在IE下sName要用...
  • js蛋疼的Class(获取class对象)

    千次阅读 2017-12-08 15:43:20
    js蛋疼的Class(获取class对象) 之前处理class对象被迫用jquery,以为JavaScript不支持class。确实百度某些大神也说js不待见class对象,就这样本菜放弃了原生js。 今天偶然发现一片文章吐槽jquery拥抱JavaScript...
  • 最近特别无聊,写了些脚本优化下浏览器浏览体验 单节点,或者一个节点,我们修改样式是这样的 let kuai = document....但是如果需要设定的样式有几十个,相同的样式,并且这种样式在页面的css是...
  • js中class继承和super

    千次阅读 2019-04-22 20:53:59
    js中class继承和super1.class的简单介绍2.class的继承 1.class的简单介绍 先看一段构造函数的代码 function Person(name,age) { this.name = name; this.age=age; } Person.prototype.say = function(){ return ...
  • 使用js创建div、添加子div并给div设置在css定义的class选择属性以及设置style属性  var parentDiv = document.createElement("div");//创建父div parentDiv.className="CssStyle1";//给父div设置class属性 ...
  • //给创建的div设置class; var con = document.getElementById('content'); //获取标签 con.appendChild(div); //向刚获取的标签添加创建的标签 var child = document.createElement("div"); //创建一个...
  • JS Class - 类创建

    千次阅读 2019-06-29 19:11:54
    Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制。通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一个initialize()方法作为构造函数, 一旦你在这个声明的类的...
  • JS es6的Class类详解

    万次阅读 多人点赞 2020-09-05 10:17:18
    文章目录JS es6的Class类详解class基本语法Class的基本语法之constructorClass的基本语法之类的调用...JavaScript 语言,生成实例对象的传统方法是通过构造函数和原型的组合模式.ES6 提供了更接近传统语言(java)
  • vue、react js变量改变class中的属性

    千次阅读 2019-10-14 10:17:09
    以前写tab切换组件的时候,发现需要根据js的值,生成不同的class样式,开始想到的是map创建很多的class类,用js变量生成不同class名,傻方法如下: ...在class中调用这个css变量就可以动态生成不同属性的class ...
  • js中classNames的使用

    千次阅读 2019-01-20 13:38:06
    作用:  将属性的名字连接在一起, ...const btn = classNames({ a: 1, b: 1, c: 1, d: 1, e: 1, f: 0, // 这里的值为非零才会输出,要是为0不会输出。 }) console.log(btn) //a b c d e 安装: In...
  • js修改html中class属性

    万次阅读 2016-10-22 01:05:11
    用到js修改html的class属性值,归纳总结下: 一、获取class属性值 var value = $("div").attr("class"); //这里获取class属性值 var array=val.split(" "); //把class值用空格分开,通过数组获取每个值 二、更改...
  • h1 :class="['red','italic']"&gt;这是一个很大的H1,大到你无法想象&lt;/h1&gt; 2.数组使用三元表达式 &lt;h1 :class="['thin','italic',isactive?'active':'']"&gt;...
  • javascript class中使用get set

    千次阅读 2018-05-20 00:37:53
    以前在es5的对象中使用过get,set,但最近做的项目一般都使用es6然后babel转es5,那么在es6中的class中如何使用get,set呢?特地试了一下,注明 node环境进行测试的. 话不多说直接上代码 // 定义一个元素类 class ...
  • xmlns="http://www.w3.org/1999/xhtml">改变javascript:;" onClick="javascript:tagshow(event, %B6%D4..." target="_self">对象的样式class.c1{font-size:15px; color:blue; font-weight:bold}.c2{font-size:18px; 
  • es6 javascriptclass的 get和set

    万次阅读 2016-12-09 18:32:19
    与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为。class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,361,878
精华内容 544,751
关键字:

js中设置class