如何为匹配元素添加和删除CSS样式

最新推荐文章于 2024-04-02 12:29:33 发布
最新推荐文章于 2024-04-02 12:29:33 发布
阅读量1k 收藏
点赞数
如何为匹配元素添加和删除CSS样式:
在网页中，往往有这样的要求，就是根据需求动态的改变网页的样式，比如说点击一个按钮就会改变另一个对象的外观等等，这个时候就需要动态的添加或者删除CSS样式，下面就通过实例简单介绍一下如何添加和删除CSS样式。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">  
div  
{  
  width:100px;  
  height:100px;  
  border:1px solid red;  
}  
.bg{background-color:green;}  
</style>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#add").click(function(){  
     $("div").addClass("bg");  
  })  
  $("#del").click(function(){  
     $("div").removeClass("bg");  
  })  
})  
</script>  
</head>  
<body>  
<div></div>  
<button id="add">添加样式</button><button id="del">删除样式</button>  
</body>  
</html>
原文地址: http://www.softwhy.com/forum.php?mod=viewthread&tid=6257

qustxiaopig
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
给HTML页面添加CSS样式和自适应布局控制其显示
程序媛乐园
10-23 561
视频播放网站 在上一篇：使用＜img＞和＜iFrame＞等HTML基础标签制作一个视频播放网站基础之上，用CSS设置样式，使其元素居中显示，大小适中。添加鼠标放置效果，使元素发生动态改变。 效果图 代码 元素居中 body{ background-color: lavender; } li{ list-style: none; display:inline-block; } img{ width:150px; } .pic:hover{ width: 170px; } 背景颜色为lavend
DOM通过ID属性添加和删除样式
chuyusha5235的博客
12-18 826
可以通过obj.getElementById("id")获取需要修改样式的标签，而后通过修改style样式进行修改样式操作，注意恢复到原样式时使用obj.removeAttribute("style"). 代码如下： <!DOCTYPE HTML><html>...
实现节点的添加、选中删除、根据内容删除、模糊查询删除、添加样式
qq_45580938的博客
09-03 217
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /*封装函数*/ function $(id){ return document.getElementById(id); ...
教你用CSS清除样式，web开发技术
04-02 936
body,} /* 将斜体扶正 */} /* 统一等宽字体 */} /* 小于 12px 的中文很难阅读, 让 small 正常化 *//** 重置列表元素 **//** 重置文本格式元素 **/} /* 重置, 减少对行高的影响 *//** 重置表单元素 **/} /* img 搭车：让链接里的 img 无边框 */} /* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 *//* 重置 HTML5 元素 */margin: 0;
css 常用样式(分享)
09-24
这些只是CSS样式中的一部分，但已经涵盖了字体、颜色、装饰、尺寸和空间等基本元素。熟练掌握这些常用样式，可以极大地提升你的网页设计能力。继续学习和实践，你将能够创建出更加美观且功能丰富的网页。
jQuery修改class属性和CSS样式整理
10-24
在本文中，我们将深入探讨jQuery如何修改class属性和CSS样式。 首先，我们来看jQuery如何修改class属性。HTML元素的class属性用于指定一个或多个类名，这些类名可以作为CSS样式的选择器。在jQuery中，有多种方法...
原生js实现class的添加和删除简单代码
10-21
接下来，我们需要一个函数来向元素添加类，这个函数叫做`addClass`： ```javascript function addClass(elements, cName) { // 如果元素还没有该类，则添加 if (!hasClass(elements, cName)) { elements....
jQuery使用之设置元素样式用法实例
12-12
- `addClass(name)`: 该方法用于向一个或多个匹配的元素添加指定的CSS类别。例如，`$("img").addClass("css1 css2")`会将"css1"和"css2"这两个类别添加到所有的`<img>`元素上。 - `removeClass(name)`: 与`...
jQuery添加和删除指定标签的方法
11-23
在提供的示例中，当点击 `#add` 按钮时，`$("div")` 选择器会选取所有的 `<div>` 元素，并调用 `addClass("mytest")`，为这些元素添加名为 "mytest" 的 CSS 类。添加后，这些 `<div>` 元素将拥有 `.mytest` 类定义的...
CSS重置样式清除浏览器默认样式
04-15
CSS重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
JavaScript如何删除css
忧郁的蛋的专栏
04-22 2160
通过本文介绍的例子，我们可以看到使用JavaScript来删除CSS样式并不困难，但需要注意一些细节问题。是经常使用的一种方法，可以将元素隐藏起来，但是它并不是真正的删除操作，它只是改变了元素的显示方式，元素仍在DOM中存在。在HTML中，每个元素都有一个style属性，通过它我们可以获取或者设置元素的样式。通过style属性中的CSS属性，我们可以设置元素的样式。假设我们有一个按钮，点击时我们需要删除它的CSS样式。在介绍JS如何删除CSS之前，我们先来看看在CSS中，如何删除样式。
CSS-清除默认样式
主营前端方向，技术栈是vue
11-10 4632
清除浏览器默认样式(清除内外边距、小白适用)
移除元素的某个css属性
ZaynahLy的博客
11-20 1万+
我们想要移除元素的某个css属性时，将属性赋值为空有时不能达到我们想要的效果，可以使用下面的方式，赋值为’initial’。$('.giftBox').css('height','initial');
HTML清除CSS基本样式
IT梦魇博客
02-27 1万+
/**2018-2-26*IT客栈*一共五种样式，可选一种使用，1为雅虎清空样式。其他为个人收藏。*网络下载地址：*/1.html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,t...
html默认css样式的标签及去除(全局)
热门推荐
muzidigbig的博客
05-19 4万+
1.标签的默认样式和清除默认样式（统一全局样式）的代码 大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...
JQ删除元素方法设置以及Css的方法设置
weixin_57746257的博客
07-27 973
JQ删除元素、Css的方法设置 一、方法介绍 （1）、删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 （2）、Css() 方法设置或返回被选元素的一个或多个样式属性 二、例子解释 （一）、HTML的结构设置部分 （二）、Css样式设置部分 （三）、效果图没有展示之前的设置显示 （四）、效果图展示 我们可以看到效果图展示后，使用“remove()...
html5怎么删除样式,css怎么删除一个样式
weixin_33923901的博客
06-23 836
css删除一个样式的方法：首先创建一个HTML示例文件；然后给div添加css样式；最后通过“removeClass()”方法从被选元素删除一个或多个类即可。本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。CSS添加样式、删除样式代码如下：div{width:100px;height:260px;}div.whiteborder{border: ...
镜像网站整理.docx
最新发布
07-16
镜像网站，即Mirror Sites，是指通过复制网站或网页的内容并分配以不同域名和服务器，以此欺骗搜索引擎对同一站点或同一页面进行多次索引的站点。以下是对镜像网站的详细整理： 一、镜像网站的定义与目的 定义：镜像网站是通过复制原网站的全部或部分内容，并部署在不同的域名和服务器上，以便用户可以通过不同的URL访问到相同的内容。 目的： 提高访问速度：通过在不同地区部署镜像站点，可以加快当地用户的访问速度。 负载均衡：当原网站流量过大时，镜像站点可以分担部分流量，减轻原网站的压力。 数据备份：镜像站点可以作为原网站数据的一个备份，以防止数据丢失。 绕过访问限制：在某些地区或网络环境下，原网站可能无法直接访问，而镜像站点则可能不受限制。 二、镜像网站的创建与管理 创建步骤： 下载安装镜像工具：如HTTrack、wget等。 配置镜像任务：在镜像工具中设置工程名称、保存路径、输入URL地址等。 开始镜像：启动镜像任务，等待镜像完成。 编辑与上传：对镜像站点进行必要的编辑（如修改title、keywords、description等），并上传到服务器。 配置网站：在服务器上配置网站，确保镜像
传感器及检测技术例题集.doc
07-16
传感器
用js封装一个 select() 函数，该函数接收一个字符参数，字符内容为css选择器形式。 o 要求1：执行 select 后，返回一个对象，该对象拥有以下方法  html()：用于 获取 或 修改 标签内容，  传字符参数，设置标签内容  不传参，获取标签内容  css()：用于 获取 或 修改 样式内容  传字符参数，获取指定css样式值  传对象参数，设置指定样式  click()：用于绑定点击事件  传函数参数，为事件处理函数  addClass()：用于添加指定class名：传字符参数，为要添加的class名  removeClass()：用户删除指定class名（保留其他class名）  传字符参数，为要删除的class名 o 要求2：执行 select 后，所有方法之间不分顺序，均可互相链式调用，亦可重复调用。均可实现对应功能
07-16
您可以按照以下方式封装一个select()函数： ```javascript function select(selector) { // 获取匹配的元素 const elements = document.querySelectorAll(selector); // 返回一个对象，拥有对应的方法 return { html: function(content) { // 如果没有传参，则获取第一个元素的内容 if (!content) { return elements[0].innerHTML; } // 设置所有匹配元素的内容为传入的content elements.forEach(element => { element.innerHTML = content; }); // 返回修改后的对象 return this; }, css: function(style) { // 如果传入的是字符串，则获取第一个元素的对应样式值 if (typeof style === 'string') { return window.getComputedStyle(elements[0])[style]; } // 设置所有匹配元素的样式为传入的style对象 elements.forEach(element => { Object.assign(element.style, style); }); // 返回修改后的对象 return this; }, click: function(eventHandler) { // 绑定点击事件 elements.forEach(element => { element.addEventListener('click', eventHandler); }); // 返回修改后的对象 return this; }, addClass: function(className) { // 添加指定class名 elements.forEach(element => { element.classList.add(className); }); // 返回修改后的对象 return this; }, removeClass: function(className) { // 删除指定class名 elements.forEach(element => { element.classList.remove(className); }); // 返回修改后的对象 return this; } }; } ``` 使用示例： ```javascript // 创建select对象 const obj = select("#myDiv"); // 链式调用方法，获取标签内容并设置样式 obj.html().css({ color: 'red' }); // 链式调用方法，绑定点击事件并删除指定class名 obj.click().removeClass('active'); ``` 请根据您的实际需求，完善相应的功能实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值