我有一个像这样的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的好资源。
1 回答
元芳怎么了
TA贡献1798条经验 获得超7个赞
您正在寻求更改整个文档的 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>
添加回答
举报
0/150
提交
取消