首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >覆盖内联css!重要

覆盖内联css!重要
EN

Stack Overflow用户
提问于 2018-01-07 17:25:27
回答 2查看 2.4K关注 0票数 1

如何使用javascript或CSS覆盖"color: red“样式?我想让它变成"2px“而不是"1px”的边框。

代码语言:javascript
复制
<div style="border: 1px solid #ccccc !important"> 
       Lorem... 
</div>

我不能将class,id添加到"div“中。这在这里不是一个解决方案。我必须以某种方式覆盖上面的代码。

解决方案使用了网站上已经加载的jquery。Ran:$(文档).ready(function() { $('tablestyle*=border').css('border-width',"4px");});https://jsfiddle.net/78oxmgLj/10/

EN

回答 2

Stack Overflow用户

发布于 2018-01-07 17:28:50

对于你的实际代码,你不能用CSS做到这一点(正如@T.J.Crowder所评论的,没有CSS规则可以用!important内联),但这里有一个JS解决方案:

代码语言:javascript
复制
document.querySelector('.box').style.borderWidth="2px";
document.querySelector('.box').style.borderColor="red";

//or
//document.querySelector('.box').style.border="2px solid red";
代码语言:javascript
复制
<div class="box" style="border: 1px solid #cccccc!important">
  Lorem...
</div>

更新

如果由于某种原因不能添加类,可以根据样式使用attribute selector (但我不建议将其用作通用解决方案)

代码语言:javascript
复制
document.querySelector('div[style*=border]').style.borderWidth="2px";
document.querySelector('div[style*=border]').style.borderColor="red";
代码语言:javascript
复制
<div style="border: 1px solid #cccccc!important">
  Lorem...
</div>

票数 2
EN

Stack Overflow用户

发布于 2022-01-06 10:00:05

虽然公认的答案是正确的,但根据您的用例,您可以在这里仅使用CSS来实现。即使不能覆盖特定值,也可以使用不同的属性来更改原始状态。

代码语言:javascript
复制
b {
  filter: hue-rotate(250deg); /*blue*/
}

i {
  display: inline-block;
  transform: scale(0.4);
}
代码语言:javascript
复制
<b style="color: red !important">Stack</b>
<i style="font-size: 50px !important">Stack</i>

在您的示例中,如果您需要将1px重要的内联边框更改为2px,您可以使用轮廓或框阴影而不进行模糊处理:

代码语言:javascript
复制
div:first-child {
  box-shadow: 0 0 0 3px #ccc;
}
代码语言:javascript
复制
<div style="border: 1px solid #cccccc !important"> 
       Lorem... 
</div>
<br>
<div style="border: 4px solid #cccccc !important"> 
       Lorem... 
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48135874

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档