本文目录一览：
- 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同一效果的。
原创文章，作者：H0T3Y，如若转载，请注明出处：https://www.506064.com/n/130810.html
微信扫一扫 
支付宝扫一扫 