本文目录一览：
- 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库都有提供自定义样式的方法的，这样实现起来才是最便捷的。