js定義控制項class（js自定義組件）

本文目錄一覽：

• 1、js 如何控制class？
• 2、js中如何定義class,如何擴展prototype?
• 3、怎樣實現js改變class功能？
• 4、vue.js怎麼定義class
• 5、如何用javascript為元素添加class
• 6、vuejs的組件化開發中，要怎麼自定義class，覆蓋原有的css樣式

js 如何控制class？

script type=”text/javascript”

window.onload = function() {

var abcs = document.getElementsByClassName(“abc”);

for(var i = 0; i abcs.length; i++) {

abcs[i].style.width = “50%”;

}

};

/script

注意：上面的代碼不支持 IE 6/7，因為 IE 6/7 不支持 getElementsByClassName。

下面的代碼支持 IE 6/7，使用 getElementsByTagName 查找 div，再查找 abc

script type=”text/javascript”

window.onload = function() {

var divs = document.getElementsByTagName(“div”);

for(var i = 0; i divs.length; i++) {

var classes = divs[i].className.split(” “);

for(var a = 0; a classes.length; a++) {

if(classes[a] === “abc”) {

divs[i].style.width = “50%”;

break;

}

}

}

};

/script

js中如何定義class,如何擴展prototype?

js沒有class的概念,可以模擬對象.function MyObject() {}上面就是一個對象,你也可以理解為一個ClassMyObject.prototype.show = function () { alert(); }為原型擴展一個叫做show的方法new MyObject().show();調用這個方法.

怎樣實現js改變class功能？

1、JavaScript允許你更改元素的class或id。當你更改之後，瀏覽器會自動更新元素的樣式。

2、是className，可不是class

注意：JavaScript使用的是className去訪問class屬性，因為class是一個保留關鍵字，因為將來JavaScript可能開始支持像Java一樣的類。

例子：

!doctype html

html lang=”zh-cn”

 head

  meta charset=”UTF-8″

  titleTest/title

  style type=”text/css”

p { 

color: #000000; /* black */ 

} 

p.emphasis { 

color: #cc0000; /* red */ 

} 

  /style

 /head

 body

p id=”test”Test/p

hr

input type=”button” value=”修改className為emphasis” onclick=”document.getElementById(‘test’).className = ’emphasis’;”br

input type=”button” value=”修改className為空” onclick=”document.getElementById(‘test’).className = ”;”br

 /body

/html

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的類，用正則清除一下即可。。。

如何用javascript為元素添加class

以給 body 標籤添加 class 為例

通過 jQuery

$( ‘body’).addClass( ‘class1 class2’ );

$( ‘body’ ).removeClass( ‘class1 class2’ );

支持 classList 的高級瀏覽器（IE10+，Chrome，Firefox，Safari）

document.body.classList.add( ‘class1’, ‘class2’ );

document.body.classList.remove( ‘class1’, ‘class2’ );

不支持 classList 的瀏覽器只能通過 className 來添加

document.body.className += ‘ class1 class2’

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

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

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

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

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

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