js原生添加自定義class（js原生添加元素）

本文目錄一覽：

• 1、vue.js怎麼定義class
• 2、js怎麼給指定id下面的所有子div添加class？
• 3、vuejs的組件化開發中，要怎麼自定義class，覆蓋原有的css樣式
• 4、js的classname和setattribute都可以給一個dom元素設置class屬性吧,
• 5、怎麼用js的addClassName給class=””加一個樣式

vue.js怎麼定義class

$(document).ready(function(){ $(“div”).each(function(i){ $(this).click(function(){ var cls=$(this).attr(“class”); if (cls.indexOf(“aaa”)gt;1){ alert(cls); //如果不想顯示不含aaa的類，用正則清除一下即可。。。

js怎麼給指定id下面的所有子div添加class？

其實只需要用到document.querySelector(‘選擇器’)和結合classList. add(“類名”）即可。

那麼你這裡就只要設置以下兩步代碼即可:

document.querySelector(‘# room＞div’). classList. add(” test”）;

document.querySelector(‘# room＞div＞input’). classList. add(” test2″）;

vuejs的組件化開發中，要怎麼自定義class，覆蓋原有的css樣式

el-table-column並不是一個dom節點，所以infotext這個類究竟用在哪，需要看下el-table-column這個組件的實現才知道。

用了第三方組件的必然都會遇到你這樣的問題，我說下我的解決方法，不一定是好的。

一個vue文件可以寫多個style/style，加上socped代表本組件的樣式，不污染全局。如果需要覆蓋第三方組件樣式，則不能加scoped，因此需要另寫一個style.xxx-component{…}/style，這裡用一個大類包裹防止污染全局。

接著，我用比較笨的方法(有好的方法請告知)，就是打開f12檢查究竟要覆蓋哪些樣式，然後寫在沒有加scoped的style里即可。

其實一些好的第三方UI庫都有提供自定義樣式的方法的，這樣實現起來才是最便捷的。

js的classname和setattribute都可以給一個dom元素設置class屬性吧,

屬性操作兩種方式:

1. obj.xxx    俗稱點操作，比如: obj.className = ‘red’;

2. obj.setAttribute(name,value)  比如: obj.setAttribute(‘class’,’red’);

卻別在於:

. 操作不能操作自定義屬性

attribute可以

對於這裡的class操作，其實是沒什麼區別的，建議用className，或者用H5裡面提供的

classList操作class

怎麼用js的addClassName給class=””加一個樣式

如下示例：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “

html xmlns=”

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

titleDemo/title

/head

style type=”text/css”

a{text-decoration: none;}

.class-name{border: 1px solid #CCCCCC;background: #FFA54F;-webkit-border-radius: 5px;-moz-border-radius: 5px;khtml-border-radius: 5px;border-radius: 5px;padding: 5px 10px;width: 100px;text-align: center;}

/style

body

    div id=”main”

        a href=”javascript:;” onclick=”add_class()”添加Class/a

    /div

script language=”javascript” type=”text/javascript”

    function add_class(){

        document.getElementById(‘main’).className = ‘class-name’;

    }

/script

/body

/html

測試效果如下：

添加class前

添加class後

與jQuery的addClass同一效果的。