JS 怎么设置 CSS 样式? 本篇文章就给大家介绍 JS 设置 CSS 样式的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
1, 直接设置 style 对象(内联样式)
使用 JavaScript 设置元素样式的最简单方法是使用 style 属性. 在我们通过 JavaScript 访问的每个 html 元素时都有一个 style 对象. 此对象允许我们指定 CSS 属性并设置其值. 例如, 这是设置 id 值为 demo 的 HTML 元素的字体颜色, 背景颜色, 的样式:
- var myElement = document.querySelector("#demo");
- // 把颜色设置成紫色
- elem.style.color = 'purple';
- // 将背景颜色设置为浅灰色
- elem.style.backgroundColor = '#e5e5e5';
- // 将高度设置为 150 px
- elem.style.height = '150px';
注: JavaScript 使用驼峰原则 (例: backgroundColor) 而不是短划线 (background-color) 表示属性名称
该 style 属性在元素上添加样式内联:
- <div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">
- Hello, world!
- </div>
但是, 这可能会使我们的标记变得非常混乱. 浏览器渲染的性能也较差.
2, 设置 style 属性 -- 添加全局样式
另一种方法是将 < style></style > 里带有 CSS 属性的元素注入 DOM. 将在设置应用于一组元素而不仅仅是一个元素的样式时, 这非常有用.
首先, 我们将创建一个样式元素.
var style = document.createElement('style');
接下来, 我们将通过 innerHTML 来给 < style > 添加我们的样式.
- var style = document.createElement('style');
- style.innerHTML =
- '.some-element {' +
- 'color: purple;' +
- 'background-color: #e5e5e5;' +
- 'height: 150px;' +
- '}';
最后, 我们将把样式注入 DOM. 为此, 我们将获取 script 我们在 DOM 中找到的第一个标记, 并用它 insertBefore()来添加我们的 style 标记.
- // 创建我们的样式表
- var style = document.createElement('style');
- style.innerHTML =
- '.some-element {' +
- 'color: purple;' +
- 'background-color: #e5e5e5;' +
- 'height: 150px;' +
- '}';
- // 获取第一个脚本标记
- var ref = document.querySelector('script');
- // 在第一个脚本标签之前插入新样式
- ref.parentNode.insertBefore(style, ref);
3, 使用 JavaScript 添加和删除类: add()和 remove()
这种方法涉及添加和删除类值, 这反过来又会改变应用的样式规则. 例如, 假设我们有一个样式规则, 如下所示:
- .disableMenu {
- display: none;
- }
在 HTML 中, 您有一个 id 为 dropDown 的菜单:
- <ul id="dropDown">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- </ul>
现在, 如果我们想将. disableMenu 样式规则应用于此元素中, 我们需要做的就是将 disableMenu 作为类值添加到 dropDown 元素:
- <ul class="disableMenu" id="dropDown">
- <li>One</li>
- <li>Two</li>
- <li>Three</li>
- <li>Four</li>
- <li>Five</li>
- <li>Six</li>
- </ul>
要使用 JavaScript 完成相同的结果, 我们将使用 classList API. 此 API 使得从 HTML 元素添加或删除类值变得非常简单.
要将 disableMenu 类名添加到我们的 dropDown 元素, 请在 HTML 元素的 classList 属性上使用 add()方法:
- var theDropDown = document.querySelector("#dropDown");
- theDropDown.classList.add("disableMenu");
要删除 disableMenu 类名, 我们可以调用 classList API 的 remove()方法:
- var theDropDown = document.querySelector("#dropDown");
- theDropDown.classList.remove("disableMenu");
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !!
来源: http://www.css88.com/qa/javascript/14695.html