JS/jQuery添加和移除CSS样式

最新推荐文章于 2024-06-29 11:51:30 发布
最新推荐文章于 2024-06-29 11:51:30 发布
阅读量8.8w 收藏 25
点赞数 12
分类专栏： jQuery JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd2011063437/article/details/81299262
版权

有时候需要添加CSS样式和移除CSS样式，如添加display属性，设为隐藏。有时候需要移除display属性。

一、jQuery移除CSS样式的两种方法

注意：当其中一种不支持时，就尝试另一种：

$("#show").removeAttr("style"); 
$("#show").attr("style","");

二、JS/jQuery添加或移除CSS样式

//通过JS添加样式+移除样式
document.getElementById('tab1').style.display="none";
document.getElementById("tab1").removeAttribute("style");

//通过jQuery添加样式+移除样式
// $("#tab1").css("display","none");
// $("#tab1").removeAttr("style","");

三、实例

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>信息管理</title>
	<!--通知ie使用最新内核-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--响应式，约束缩放-->
	<meta name="viewport" content="width=device-width, maxinum-scale=1,user-scalable=no,initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
	    body{ background:#eee;}
	    #main{ max-width:640px; font-family:"微软雅黑"; }
	
	    /*头部*/
	    .tou{ background:#fff; margin-top:20px; padding-top:13px; padding-bottom:13px;}
	
	    /*头部左边*/
	    .tou .tou-left{ margin-left:15px;}
	    .tou .tou-left a{}
	    .tou .tou-left img{ width:78px; height:78px;}
	
	    /*头部右边*/
	    .tou .tou-right{ position:relative; float:left; margin-left:20px;}
	    .tou .tou-right h3{ font-size:18px; margin-top:3px; margin-bottom:8px;}
	    .tou .tou-right p{ font-size:14px; color:#999; margin-bottom:5px;}
	    .tou .tou-right .self-depart{ margin-bottom:0px;}
	
	    /*采集和已采集连接*/
	    .self-nav{ margin-top:20px; background:#fff; ;}
	    .self-nav .col-xs-6{ padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
	    .self-nav .btn{ padding-top:10px; padding-bottom:10px;}
	
	    /*采集列表*/
	    .self-menu{ margin-top:20px; background:#fff;border-top:1px solid #fff; border-bottom:1px solid #fff; }
	    .self-menu .self-menu-cont li{ border-bottom:1px solid #eee;}
	    .self-menu .self-menu-cont li .self-danger{ background:#C00;}
	
	    /*底部技术支持*/
	    .self-footer{ margin-top:20px; background:#fff; padding-top:13px; padding-bottom:13px; }
	    .self-footer p{ margin-bottom:0; font-size:12px; color:#666; text-align:center;}
	</style>
</head>
<body>
	<div class=" container" id="main">
    	<!--头部-->
    	<div class="row tou">
        	<div class=" pull-left tou-left">
            	<a href="./"><img src="" class="img-responsive"/></a>
            </div>
            <div class=" tou-right">
            	<h3>张三</h3>
                <p>微信号：zhangsan</p>
                <p class="self-depart">部门：安全部</p>
            </div>
        </div>
        <!--banner-->
        <div class="row self-nav">
        	<div class="col-xs-6">
            <a href="#tab1" class="btn btn-block btn-default" data-toggle="tab" id="send" onclick="hiddenTag()">信息列表</a>
          </div>
          <div class="col-xs-6">
              <a href="#tab2" class="btn btn-block btn-default" data-toggle="tab" onclick="showTag()">添加信息</a>
          </div>
        </div>
        <!--菜单列表-->
        <div class="row self-menu">
        	<ul class="nav nav-pills nav-stacked self-menu-cont tab-pane active fade in" id="tab1">
              <li><a href="">信息列表<span class="badge pull-right">10</span></a></li>
              <li><a href="">消息列表<span class="badge pull-right">10</span></a></li>
              <li><a href="">留言列表<span class="badge pull-right">10</span></a></li>
              <li><a href="">传达列表<span class="badge pull-right">10</span></a></li>
              <li><a href="">通知列表<span class="badge pull-right">10</span></a></li>
          </ul>
          <ul class="nav nav-pills nav-stacked self-menu-cont tab-pane fade" id="tab2" style="display:none">
              <li><a href="">添加信息</a></li>
              <li><a href="">添加消息</a></li>
              <li><a href="">添加留言</a></li>
              <li><a href="">添加传达</a></li>
              <li><a href="">添加通知</a></li>
          </ul>
        </div>
     </div>   
</body>
<script>
    function hiddenTag(){
      //通过JS添加样式+移除样式
      document.getElementById('tab1').style.display="block";
      document.getElementById('tab2').style.display="none";

      //通过jQuery添加类选择器和移除类选择器
      $("#add").removeClass("btn-primary");
      $("#add").addClass("btn-default");
      $("#send").removeClass("btn-default");
      $("#send").addClass("btn-primary");

      //通过jQuery添加样式+移除样式
      // $('#tab1').css("display","block");
      // $('#tab2').css("display","none");
    }
    function showTag(){
      //通过JS添加样式+移除样式
      document.getElementById('tab1').style.display="none";
      document.getElementById("tab2").removeAttribute("style");

      //通过jQuery添加类选择器和移除类选择器
      $("#send").removeClass("btn-primary");
      $("#send").addClass("btn-default");
      $("#add").removeClass("btn-default");
      $("#add").addClass("btn-primary");
      
      //通过jQuery添加样式+移除样式
      // $("#tab1").css("display","none");
      // $("#tab2").removeAttr("style","");
    }
</script>
</html>
苦的人生遇见甜
关注
  • 12
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js移除某个样式_js怎么移除css样式？
weixin_39951112的博客
12-19 6374
在工作中，经常需要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的。我们也可以通过此方法移除css样式。JavaScript移除css样式的方法有：1、如果使用class加的样式的话，可以使用document.getElementById("obji...
jQuery添加或者移除css类,jQuery添加/改变/移除CSS类及判断是否已经存在CSS
weixin_33295214的博客
08-04 2435
jQuery添加/改变/移除CSS类及判断是否已经存在CSS改变页面元素样式使用Javascript也可实现，但有没有更简洁的办法，答案是肯定的，现在有了jQuery，似乎让Js代码瘦身了不少，应验了那句话：“jQuery让JavaScript代码变得简洁！”，言归正传，来看jquery如何添加、移除CSS类：1. removeClass() - 移除CSS类$("#target").remove...
JQ添加移除css样式
weixin_33728268的博客
03-04 95
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！” 1. ...
JQuery添加或移除CSS样式
yage124的博客
10-22 772
JQuery添加或移除CSS样式1、添加CSS样式2、移除CSS样式 1、添加CSS样式 $("选择器").css("属性名","属性值"); 2、移除CSS样式 //只需要填写需要移除的属性名，属性值为""空串 $("选择器").css("属性名",""); ...
js给指定class类的对象，添加或者移除class类，以及js动态修改其css样式
最新发布
weixin_42966151的博客
06-29 472
【代码】js动态给指定class类的对象，添加或者移除class类，以及动态修改其css样式。
JQuery添加或移除CSS样式 页签
乐逍遥
06-08 1053
addClass() 方法向被选元素添加一个或多个样式。$("选择器").addClass("class1 class2 ... classN")removeClass() 方法从被选元素移除一个或多个样式。如果不写参数，则移除所有的样式。// 移除所有的样式$("选择器").removeClass();// 移除一个或者多个样式$("选择器").removeClass("class1 class2 ... classN");css html js...
js/jq添加和移除样式的几种写法
weixin_40362806的博客
04-21 860
JQuery和js添加和移除样式
js去除div里class样式
08-22
js去除div里class样式，自己学习的，分享给大家，大神就不要说我了，谢谢。
javascript怎么清除CSS样式？
BOM485480的博客
12-27 8435
在js中，可以使用setAttribute方法来设置class属性，替换掉原有class属性，实现删除css样式的功能，下面我们介绍一种更规范的方式，使用removeProperty方法，清除规则样式。 javascript怎么清除CSS样式？ 一、使用setAttribute方法清除样式 dom结构 <p id="p" style="color:#FF0000">hello...
jQuery如何移除css样式？
Java开发，人工智能，边缘计算，致力于掌握前沿技术
07-08 1万+
解决办法 1、移除全部样式使用removeattr（“style”）； 2、移除单个样式使用css（“属性”，“”）； 例如： <script type="text/javascript"> $(function(){ $("li").mouseover(function(){ //添加css样式 $(this).css("background","#...
jQuery的属性与样式之增加样式、删除样式、切换样式
weixin_44538469的博客
06-17 2314
开发工具与关键技术：Visual Studio ASP.NET MVC 作者：刘剑鸿 撰写时间：2019年06月14日 星期五 jQuery的属性与样式之增加样式、删除样式、切换样式 1 .addClass增加样式 在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称...
jquery 如何动态添加、删除class样式方法介绍
weixin_30338481的博客
03-05 52
$("#test").attr("style",{"display":"none"}); 如果完全不要就可以使用 $("#test").removeAttr("style" 移除css样式last 去除最后一个span $(".goods_list_pannel_link_4x").find('>span:last').remove(); 转载于:https://www.c...
原生javascript添加和删除css类名
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
01-30 8080
一、classList的add()和remove()方法 css样式 .new{ color: #FFD113; } html标签 &lt;span class="old"&gt;首页&lt;/span&gt; js代码 var arr = document.getElementsByTagName("span"); arr[i].classList.a...
解决display:none
Chu_Jin_can的博客
11-09 3393
selenium：解决页面元素display:none的方法 在UI自动化测试中，有时候会遇到页面元素无法定位的问题，包括xpath等方法都无法定位，是因为前端元素被设置为不可见导致。 这篇博客，介绍下如何通过JavaScript修改页面元素属性来定位的方法。。。 1、具体问题 常见的页面元素不可见导致的不可定位，都是由于下面的问题： 通过查看相关文档，可以看出display:none方法是设置元素不可见，这就是导致为什么通过定位页面元素无法定位的原因。 关于display更多的信息，可以看这里：HTML
js、jquery 实现往table中动态添加、删除元素
城之于域的博客
06-12 1393
js实现方式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加元素</title> <link rel="stylesheet" href="../css/init.css" /> <style> ....
Js中读取、移除属性及隐藏组件方法研究
thinkingdaisy的博客
12-12 8073
添加、移除组件属性方法: $(".class名").attr("属性名","属性值");//设置指定属性 $(".class名").attr("属性名");//读取指定属性值      or       document.getElementById("id值").getAttribute("属性名"); $(".class名").removeAttr("属性名");//移除该class
清除css的display属性
大道至简，开发由我！
04-03 1万+
今天在项目中遇到了一个要清除display属性的问题，整了半天才搞好，给大家分享一下。 var b=$(obj).attr(‘id’); var a=document.getElementsByName(b); for(var i=0;i<a.length;i++) { if(a[i].style.display==’none’){ a[i].style.display=”; }else
js中设置控件的隐藏与显示(display:none)
热门推荐
五月天的博客
08-17 4万+
CSS中的display和visibility   css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。谈们的属性分别如下： display:none|block;display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有10...
jquery添加和移除css
06-02
要添加CSS样式，可以使用jQuery的`css()`函数，例如： ```javascript // 添加背景颜色为红色 $("div").css("background-color", "red"); ``` 要移除CSS样式，可以使用`removeAttr()`函数，例如： ```javascript // 移除背景颜色 $("div").removeAttr("style"); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值