Question

我想在我的文档中添加一些根本没有样式的HTML元素。但我需要确保无论项目，网页或其他任何内容，这些元素看起来都不会有所不同。这些元素将通过Javascript插入到页面中，并且将是SPAN。

我的想法是将SPAN添加到文档中的文本样式片段中。但是之前可能已经在SPAN元素中添加了一些样式，这将改变我期望的结果。

所以让我们假设我正在编写一个Widget，你们中的任何人都可以在你自己的网页中使用它。这就是为什么我不能直接改变元素的样式，比如直接更改样式表。解决方案必须通过Javascript实现。不想要JQuery。

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span>
</body>

有什么想法吗？

Answer 1

所以让我们假设我正在编写一个Widget，你们中的任何人都可以使用它在您自己的网页中。这就是为什么我不能做太多改变的原因元素的风格直接

您可以使用style元素和scoped属性。这样，您只能设置元素的样式，而不会影响页面的其他部分。

但请注意旧浏览器不支持它。

如果您不希望页面样式影响您的元素，请参阅How can I prevent CSS from affecting certain element?

Answer 2

如果您真的希望将元素的样式与页面上其他元素的样式分开，可以使用自定义标记来执行此操作。

例如，您可以使用任意方式，而不是使用span，并以任何方式设置这些元素。

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan>
</body>

Answer 3

你可以尝试这个吗？

 <style>
      span{
        font-weight: bold;
        /*anything else goes below*/
      }    .a_regular_span span{ font-weight: normal;
        /*anything else goes below*/
     }

 </style>

以编程方式从单个HTML元素中删除CSS样式规则

3 个答案: