js 给某个div增加class 样式(三种方式)

js 给某个div增加class 样式(三种方式)

第一种:      el.setAttribute(‘class’,’abc’); 

  <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>setAttribute('class', 'abc')</title>
    <style type="text/css">
    .abc {
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.setAttribute("class", "abc");
    </script>
    </BODY>
    </HTML> 

第二种: el.setAttribute(‘className’, ‘abc’);

   

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>setAttribute('className', 'abc')</title>
    <style type="text/css">
    .abc {
    
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.setAttribute("className", "abc");
    </script>
    </BODY>
    </HTML>

第三种:el.className = ‘abc’;

  

 <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>el.className = 'abc'</title>
    <style type="text/css">
    .abc {
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.className = 'abc';
    </script>
    </BODY>
    </HTML>

建议使用第三种方法, 其他方法可能存在浏览器兼容问题。

原文:https://blog.csdn.net/yan791124465/article/details/71123664

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112655.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 小白都能学会的git的命令操作

    小白都能学会的git的命令操作

  • 临界区保护_临界地带

    临界区保护_临界地带1临界区保护1.1问题引入首先看一下如下问题:原因分析:根本原因在于读-改-写过程中随时会被打断,再恢复运行时写,导致打断过程中其它写的效果被覆盖。1.2临界区概念临界区的概念如下:临界区指的是访问多个任务共享资源的一段代码。当有任务进入临界区时,其它任务必须等待直至该任务离开临界区,以确定共享资源的访问不会冲突。由于共享资源的访问存在于任务与任务之间、任务与中断I…

    2022年10月30日
  • Anaconda环境下Tensorflow的安装与卸载

    Anaconda环境下Tensorflow的安装与卸载Anaconda环境下Tensorflow的安装与卸载文章目录Anaconda环境下Tensorflow的安装与卸载一、环境的创建与删除1.查看自己配置的环境2.配置一个新的环境3.进入和退出环境4.删除环境二、包(第三方库)的安装与卸载1.查看安装的包2.安装包3.删除包4.更新包三、tensorflow的安装与卸载1.创建一个tensorflow环境2.激活tensorflow环境3.安装tensorflow4.查看是否安装成功5.查看tensorflow的版本号6.退出tensorflow环境一

  • vue 分页组件_bootstrap 分页

    vue 分页组件_bootstrap 分页1、page.vue组件<template><divclass=”greenpage”><!–:layout=”layout”–><el-pagination:background=”background”:current-page.sync=”currentPage”:page-size.sync=”pageSize”:page-sizes=”pageSizes”

  • butterknife Annotation processors must be explicitly declared now…

    butterknife Annotation processors must be explicitly declared now…

  • c++拷贝构造函数

    c++拷贝构造函数

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号