使用 JavaScript 更改 CSS 示例
JavaScript 都是关于动态的东西,处理动态 CSS 更改只是 JavaScript 正是我们需要的场景之一。
使用 JavaScript,我们可以为 DOM 中的一个或多个元素设置 CSS 样式,修改它们,删除它们,甚至更改所有页面的整个样式表。
让我们来看看我们可以做到这一点的不同方法:
1. 用 JavaScript 改变 CSS 内联属性
直接从 JavaScript 设置单个样式是处理动态 CSS 样式时最常见的场景之一。
这种方式允许您更改 DOM 中存在的一个或多个元素的 CSS 样式。
你所要做的就是:
- 查询 DOM 中存在的元素。
- 并为它一一设置样式。
const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';
请注意,使用该
style
属性设置 CSS 样式时,您必须以驼峰形式编写 CSS 属性。而不是使用破折号-
来分隔单词,您必须将每个单词的首字母大写。(backgroundColor
,fontSize
)
如果您像这样执行此代码,您会注意到更改发生在页面加载时。
如果要动态更改 CSS 样式,则必须将这部分代码附加到某个事件。
例如,如果您想在单击按钮时更改元素的样式,那么您必须首先监听click
事件并附加一个包含先前代码的函数。
这是一个例子:
const button = document.querySelector('button');
button.addEventListener('click', () => {const element = document.querySelector('.demo');element.style.backgroundColor = 'red';
});
请注意,当您使用 JavaScript 应用特定样式时,这些样式优先于样式表上外部应用的样式,甚至优于 HTML 元素本身内联应用的样式。
.demo{color: red;
}
<!-- Element with inline styles declared in the HTML -->
<div class="demo" style="color: blue;">Demo</div>
例如,在这种情况下,我们有一个带有内联样式的元素,为它提供了黄色背景。
如果我们现在将 CSScolor
属性设置为green
使用 JavaScript,那么我们的元素将获得green
颜色。它将覆盖内联样式和应用于外部 CSS 样式表的样式。
2.同时设置多个CSS样式
想象一下,您必须为单个元素应用 5 或 10 种样式。
您可以一一进行,并具有以下内容:
element.style.display = 'block';
element.style.width = '100px';
element.style.backgroundColor = 'red';
element.style.border = '2px';
element.style.fontSize = '12px';
element.style.color = 'white';
element.style.margin = '20px';
element.style.paddingLeft = '10px';
element.style.paddingBottom = '10px';
element.style.lineHeight = '13px';
但也许您正在寻找一种“更智能”的方式来同时更改它们,而无需太多代码重复。
如果是这样的话,那么我有一个好消息要告诉你!
您实际上可以将string
值传递给cssText
属性以一次设置多个 CSS 样式。
更好的是,我们可以使用模板文字类型的字符串来将它们分开在不同的行中,就像您在样式表中所做的那样。
// Defining all our CSS styles
const myStyles = `display: block;width: 80%;background-color: red;border: 2px;font-size: 5em;color: white;margin: 20px;padding-left: 10px;padding-bottom: 10px;border: 2px solid black;
`;
const element = document.querySelector('.demo');element.style.cssText = myStyles;
如果您正在学习 JavaScript,您可能需要查看我们的列表,其中包含学习 JavaScript 的最佳书籍或学习 JavaScript的最佳方法是什么。
2. 更改 JavaScript 中的 CSS 类
<div class="demo">Hello</div>
// Adding a CSS class name to an element
const element = document.querySelector('.demo');
element.classList.add('new-class');
.new-class{background: red;
}
同样,您也可以通过使用删除某些类,classList.remove
甚至在使用时切换它们classList.toggle
。
这是一个例子:
// Removing an existing class from an element
const element = document.querySelector('.demo');
element.classList.removeClass('.new-class');
// Toggling a class from an element
const element = document.querySelector('.demo');
element.classList.toggleClass('.new-class');
3.动态改变CSS样式表
假设现在您不想将内联样式添加到元素或对其应用类。相反,您希望在样式表级别应用更改。为什么?
有几个原因:
您可能希望将更改应用于具有特定选择器的所有元素。但不仅适用于 HTML 上现在存在的元素,还适用于以后将动态添加的所有未来元素。
可能有大量元素共享您要对其应用更改的选择器。想象一下 500 个元素共享您的选择器,甚至 1K、5K、10K。必须使用 JavaScript 选择所有这些元素,然后遍历它们以更改它们的样式(或添加一个类)将非常缓慢。
在这里直接修改 CSS 样式表会派上用场。
您可以使用 选择文档的样式表document.styleSheets
。如果您知道要修改的样式表是第二个,则可以使用document.styleSheets[2]
.
然后,您将遍历其所有规则并获取您需要修改的规则。在这种情况下,如果要修改.element
类,可以将每个规则的选择器与.element
.
这是代码:
// Getting the stylesheet
const stylesheet = document.styleSheets[2];
let elementRules;// looping through all its rules and getting your rule
for(let i = 0; i < stylesheet.cssRules.length; i++) {if(stylesheet.cssRules[i].selectorText === '.element') {elementRules = stylesheet.cssRules[i];}
}// modifying the rule in the stylesheet
elementRules.style.setProperty('background', 'blue');
这是您可以使用的 Codepen 示例:
4. 动态添加和删除 CSS 样式表
在某些情况下,我们可能只想附加一个全新的样式表,甚至替换现有的样式表。
其原因可能是:
您有一个支持多个主题并允许用户动态更改它们的 Web 应用程序。
您可能希望将组件打包在单个 JS 文件中,而不必同时包含 JS 和 CSS 两个文件。
它的工作方式非常简单:
- 1- 我们使用模板文字为我们的新样式表编写内容。
- 2- 我们选择
head
页面元素来附加我们的新样式表。 - 3-我们使用创建样式表元素
document.createElement("style")
- 4- 我们使用
document.createTextNode
and将样式表内容附加到新样式元素appendChild
。
这是代码:
const button = document.querySelector("button");// The content of the stylesheet
const styleSheetContent = `.demo{background:red;}
`;// Attaching the change to a click event in a button
button.addEventListener("click", () => {appendStyleSheet("demo", styleSheetContent);
});// Appends CSS content to the head of the site
function appendStyleSheet(id, content) {if (!document.querySelector("#" + id)) {var head = document.head || document.getElementsByTagName("head")[0];console.log(head);head.appendChild(createStyleElement(id, content));}
}// Creates the style element
function createStyleElement(id, content) {var style = document.createElement("style");style.type = "text/css";style.id = id;if (style.styleSheet) {style.styleSheet.cssText = content;} else {style.appendChild(document.createTextNode(content));}return style;
}
这是 Codepen 示例,因此您可以自行测试并根据需要修改一些内容:
5. 用 JavaScript 覆盖 CSS!important
样式
我们都知道规则:“避免使用!important”。但是,嘿!有时它真的很有必要,或者它只是我们无法控制的。
priority 属性确保此类样式将!important
覆盖任何内联声明的样式(编写在 HTML 元素本身中)以及任何先前声明的适用于您的元素的规则。
那么......如果我们需要覆盖之前使用声明的样式!important
怎么办?
想象一下我们有我们的元素:
<div class="demo">Demo</div>
样式表使用如下!important
规则:
.demo{background-color: yellow !important;
}
您所要做的就是在JavaScript 提供给我们priority
的函数上应用参数:setProperty
el.style.setProperty(property, value, priority);
这是一个例子:
var el = document.querySelector('.demo');
el.style.setProperty('background-color', 'red', 'important');
请注意,在使用时,
setProperty
我们指定 CSS 属性的方式与在样式表中的方式完全相同。使用破折号-
分隔单词。(background-color
,font-size
)
参考:
- MDN 网络文档
相关文章:
- 如何使用 JavaScript 警报
- 如何在 JavaScript 中更改选定的选项
- 如何防止在可滚动元素上滚动
使用 JavaScript 更改 CSS 示例相关推荐
- 修改html本地样式,html-如何通过Javascript更改CSS类样式?
使用香草javascript可以通过两种方式完成此操作. 第一个是classList,第二个是classList.className在所有浏览器中均可使用,但在修改元素的class属性时可能难以操作. ...
- 如何使用JavaScript更改元素的类?
如何使用JavaScript更改HTML元素的类以响应onclick事件? #1楼 对以前的正则表达式的一些小注释和调整: 如果班级列表中的班级名称不止一次,您将希望在全局范围内执行此操作. 而且,您 ...
- 我为什么要用 Javascript 编写 CSS?
曾经的前端开发中,JavaScript.CSS.HTML 作为三大独立的技术,各司其职,互不干涉.然而随着组件结构 React 的出现,将 HTML.CSS.JavaScript 强制混合在一起,这就 ...
- js 更改body html,通过JavaScript更改body标签样式
我试图编写一个脚本来改变页面的宽度,考虑到用户的客户端宽度. 这件事情是这样的:通过JavaScript更改body标签样式 function adjustWidth() { width = 0; i ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- JavaScript和css的交互.05
JavaScript和css的交互.05 本期内容 操作css更改样式 先写三个图片 <img id="m1" src="img/1.gif" alt=& ...
- 响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互 补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
- css a hover禁止,我可以通过JavaScript禁用CSS:hover效果吗?
我试图阻止浏览器:hover通过JavaScript 使用CSS 的效果. 我在CSS中设置了a和a:hover样式,因为如果JS不可用,我希望获得悬浮效果.但是,如果有可用的JS ,我想用更平滑的效 ...
- css 示例_灵感:CodePen上纯CSS动画的10个示例
css 示例 我们的移动浏览器在向我们展示令人惊叹,精美的动画方面不断变得越来越强大,越来越出色. 当与CSS的布局功能结合使用时,就可以完全不使用任何图像来创建一些精美的作品. 结果是可伸缩的,快速 ...
最新文章
- 5G/4G:空口MAC层架构的简要变化。
- redis、kafka、rabittMQ对比
- linux5支持32,Red Hat发布RHEL5.3 可支持32颗虚拟CPU
- win10 uwp unix timestamp 时间戳 转 DateTime
- 点开那些优秀的硕博士们的朋友圈,他们都有这些特点!
- zuul过滤器_Zuul 2 –样本过滤器
- Java 9、10及更高版本:Java平台的未来
- IDEA运行VUE npm install报错:chromedriver@2.27.2 install: node install.js
- MySQL基础2——表的约束
- scheduled 每月最后一天_单周、双周、每月?哪种定投方式收益最高?
- FT1248开发笔记
- 软齿面主要失效形式_齿轮4种常见故障原因,如何采取预防措施,避免齿轮失效...
- 看陈广老师c#参考视频总结(第三篇)
- 光流(三)--LK算法改进(金字塔LK)
- C++ 任意类型 转 string
- 黑暗之魂3设置无边窗口化
- php更换照片背景,ps怎么换照片背景
- 《S.忒修斯之船》读后感600字心得体会
- Github建立个人导航网站
- 用root登录亚马逊云
热门文章
- java环境配置——JDK安装
- cf服务器维护中是什么意思,cf游戏服务器维护中
- @Transactional的超详细介绍
- qpython3 l_【强化学习】python 实现 q-learning 例三(例一改写)
- 华为教小米如何做人:雷军吹牛逼遭通信博士打脸
- Apache Geronimo 2.2发布
- 自己动手实现4大免费聊天机器人:小冰、图灵、腾讯、青云客
- Spring第三天,详解Bean的生命周期,学会后让面试官无话可说!
- 由于 Exception.ToString() 失败,因此无法打印异常字符串。
- xilinx FPGA触发器和锁存器