如何通过 JS 更改 CSS 类样式
我有一个像这样的css：
.title-bottom:before {
bottom: -5px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 80px;
}
左：0将下划线设置为左侧，但当 RTL 处于活动状态时，它必须向右浮动。所以，我想向左改变：0向左：初始，如果 rtl 存在。
我该怎么做？我开始这样编写代码：
if (document.dir === 'rtl'){
但我无法继续。因为我找不到学习JS的好资源。
我需要一个代码来解决这个问题，也是学习JS的好资源。
胡子哥哥浏览 102回答 1
1回答
-
元芳怎么了
您正在寻求更改整个文档的 CSS 规则。执行此操作的一种方法是将样式表附加到文档的 中，然后将规则更改放在那里。由于添加的样式表是文档中的最后一个样式表，因此它将覆盖默认规则。<head>if (document.dir === 'rtl') { // create a new style sheet and append to head let newStyle = document.createElement('style'); newStyle.innerHTML = '.title-bottom:before { left:initial; }'; document.head.appendChild(newStyle);}function addRtl() { let newStyle = document.createElement('style'); newStyle.innerHTML = '.title-bottom:before { content: ".rtl"; }'; document.head.appendChild(newStyle); document.dir = 'rtl';}.title-bottom { background-color: lightgray; padding: 1rem;}<body><h1>RTL Style Manipulation</h1><button onclick="addRtl()">Add New Style Sheet</button><div class="title-bottom">.title-bottom</div></body>替代方法：CSS 属性但是，由于您基于名为“dir”的属性进行更改，因此您不需要任何JavaScript来实现此目的。相反，您可以使用 CSS [属性 = 值] 选择器。CSS 属性选择器具有窗体 ，它将匹配将该属性设置为该值的元素。[attribute=value]要在 进行样式修改时，可以使用：document.dir === 'rtl'[dir*=rtl] .title-bottom:before { left:initial;}显示如何使用 CSS 属性选择器的小示例：function rtl() { document.dir = 'rtl';}function ltr() { document.dir = 'ltr';}[dir=rtl] p { color: red;}<h1>Change document.dir</h1><button onclick="rtl()">set rtl</button><button onclick="ltr()">set ltr</button><p>Paragraph text will be red when document.dir === 'rtl'</p>
随时随地看视频慕课网APP
相关分类
JavaScript