javascript - 检索或更改伪元素的 css 规则

coder 2025-01-16 原文

编辑 2015-10-07 1624 CST

这个问题已被标记为可能重复 - 我发布它的原因是其他问题的答案都没有提供我想要的所有信息，我想要一种简单直接的方法来做到这一点。我可以控制样式表和规则的顺序，以便引用正确的规则。我还想就这种方法的可行性得到反馈，因为它在 future 会被打破。

查看我在下面发布的评论，了解我不接受可能重复问题的答案的其他原因。

**原始问题如下**

我搜索了一个这样的问题，并找到了一些解决问题的一部分，但不能同时检索和更改伪元素的 CSS 值，如 ::before和 ::after .

在来这里之前我已经用谷歌搜索了网络，基本上我发现没有理想的方法可以做到这一点。

我找到了一种适用于 FF 40、IE 9 和 Chrome 45.0.2454.101 m 的方法，但我想知道我是否忽略了某些可能导致我的方法在某些情况下中断的东西。

我在网上和其他地方看到的关于访问或更改伪元素的 CSS 值的答案说，您不能直接访问这些元素，因为它们不是“DOM 的一部分”和“DOM 之外” "

他们说改变它们的唯一方法是创建一个新规则并将其附加到现有规则以覆盖编码值。

这是一个演示该方法的片段:

function changeColor () { // Flip psedo element's background color
	var newColor,
		currentColor;
	
    // Get the current color
	currentColor= document.styleSheets[0].cssRules[0].style.backgroundColor;  
	
    // flip the color
	newColor = (currentColor== "red") ? "aqua" : "red";  					  
	
     // Change the color
    document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;  	  
    
    // put color in top message
    document.getElementById("colorIs").innerHTML = newColor;
  
    // display colors  
	document.getElementById("displayColors").innerHTML = 
			"Pevious color was " + currentColor + 
            ", changed to " + newColor + ".";  
            
    // Change background of button (not needed but thought I'd throw it in)
    document.getElementById("changeButton").style.backgroundColor = newColor;                      
}

#testDiv::before {
      background-color: aqua;
	  content: "psedo element ";
  }

#changeButton {
	background-color: aqua;
}

<div id="testDiv">
  This divsion has an pseudo ::before element whose background color is
  <span id="colorIs">
		aqua
	</span>
  <br>
  <br> Click "Display and Flip Color" to display the colors
  <br> and flip the color from aqua and red and vice versa.
</div>
<br>
<form method="post">
  <input id="changeButton" name="change" type="button" value="Display and Flip Color" onclick="changeColor();">
</form>
<br>
<div id="displayColors">
</div>

我意识到这取决于我知道样式表的顺序和其中的规则，但我可以控制它。

这些似乎与我所看到的答案背道而驰，即伪元素的 CSS 项不是 DOM 的一部分，因此无法通过 DOM 访问。

由于发布我阅读的答案后发生的浏览器或 DOM 更改，这种方法是否可行？

这种方法将来可能会失败的可能性有多大？

那些使用不同版本的各种浏览器的人请尝试该片段并让我知道它是否有效？

鲍勃

编辑 2015-10-08 1352 CST

我已经修改了访问伪元素样式的方法，以便能够直接引用有问题的样式表，而不管它的定义顺序如何。

我会更改代码段，但我看不到给 css“样式表”一个 id 的方法。

相反，我会告诉我如何修改它。

1)分离定义正在使用的元素的CSS并将其放在单独的文件中。

2) <link 上的代码 id=引用 CSS 文件的标记。在这种情况下，我会使用 id="colorFlipFlop"

3) 更改 JavaScript 以引用或更改样式:

currentColor = document.styleSheets[0].cssRules[0].style.backgroundColor;

document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;

至:

var beforeIndex = 0; // give a name to the index, in cssRules, of the rule we want to get and change.

var styleSheetObject = document.getElementById("colorFlipFlop"); // get a reference to the stylesheet object

currentColor = styleSheetObject.sheet.cssRules[beforeIndex].style.backgroundColor;   // get current pseudo element background color

styleSheetObject.sheet.cssRules[beforeIndex].style.backgroundColor = newColor; // set new background color

如果我认为有必要，我会在 CSS 和 Javascript 以及 HTML 中完整记录所有这些内容，并提供尽可能多的评论来解释我在做什么、我是如何做的以及我为什么这样做以我的方式来做——我称之为评论的 WHW。

我觉得这使功能更易于管理和更防弹。

您现在不再需要样式表对象的索引，所有内容都与页面上的所有其他内容巧妙地分开，并且它仍然提供了一种直接访问和更改伪元素样式的方法，而无需创建和附加新规则。

在发布此编辑之前，我将创建一个包含 CSS、JavaScript 和 HTML 的文件，以实现代码片段显示新方法的功能。我会将所有内容放在一个文件中，以便更轻松地创建和 FTP 到站点。在现实世界的代码中，我会使用单独的 CSS、JavaScript 和 HTML 文件。

它将在 http://thetesting.site/flipFlopColor.html

所以你怎么看？

最佳答案

操纵 CSSRule 代替 DOM 元素是一种晦涩但完全有效的(和 standardized )更改元素样式的方法。它之所以晦涩难懂，是因为它很困难，需要一个嵌套循环遍历所有样式表中的所有规则，以找到您想要更改的规则。它也很晦涩，因为它不是 super 有值(value)的——你通常可以通过访问 DOM 元素的 style 来完成同样的事情。属性(property)。

但是，对于伪元素，没有 DOM 元素。伪元素是样式规则的产物，所以操纵伪元素的唯一方法是通过样式规则。人们建议添加样式规则，因为这比找到样式规则并编辑它更容易。但是查找和编辑它是完全有效的。

通过添加样式规则一次，然后保留对该规则的引用并对同一规则进行后续编辑，您可以两全其美。

关于javascript - 检索或更改伪元素的 css 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32981211/

有关javascript - 检索或更改伪元素的 css 规则的更多相关文章

ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？最佳答案我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby - Capistrano 3 在任务中更改 ssh_options - 2
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
ruby - 更改 ActiveRecord 中对象的类 - 2
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
ruby - 在哈希的键数组中追加元素 - 2
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？最佳答案如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的
「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
ruby - Hanami link_to 助手只呈现最后一个元素 - 2
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

javascript - 检索或更改伪元素的 css 规则

有关javascript - 检索或更改伪元素的 css 规则的更多相关文章

随机推荐