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

更新： 2022-11-11 15:59

本文目录一览：

vue.js怎么定义class
js怎么给指定id下面的所有子div添加class？
vuejs的组件化开发中，要怎么自定义class，覆盖原有的css样式
js的classname和setattribute都可以给一个dom元素设置class属性吧,
怎么用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") > 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>，加上 scoped 代表本组件的样式，不污染全局。如果需要覆盖第三方组件样式，则不能加 scoped，因此需要另写一个 <style>.xxx-component{...}</style>，这里用一个大类包裹防止污染全局。接着，我用比较笨的方法（有好的方法请告知），就是打开 F12 检查究竟要覆盖哪些样式，然后写在没有加 scoped 的 <style> 里即可。其实一些好的第三方 UI 库都有提供自定义样式的方法的，这样实现起来才是最便捷的。

js的classname和setattribute都可以给一个dom元素设置class属性吧,

属性操作两种方式:

obj.xxx 俗称点操作，比如: obj.className = 'red';
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Demo</title>
  <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>
</head>
<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 同一效果的。