Javascript更改html上的样式元素

Posted 2023-03-05

【中文标题】Javascript更改html上的样式元素

【英文标题】：Javascript change style element on html

【发布时间】：2018-09-20 03:41:12

【问题描述】：

当我注入 document.getElementsByTagName("body")[0].style.background = "red";在 Firefox 的开发者控制台中，背景变为红色。但是当我做 webview.loadUrl("javascript:document.getElementsByTagName(\"body\")[0].style.background = \"red\";");在 android webview 中，其中的全部内容都被“red”这个词所取代。为什么背景颜色没有改变并且内容被替换？另外，如何使用 javascript 更改 webview 中的样式属性？

【问题讨论】：

您可以编辑您的帖子并向我们展示 html 吗？

您有一个明确的问题，然后您对其进行了编辑以使其不太清楚？最初您是在谈论更改color。现在您只要求更改“div 样式”。

请不要在人们放弃回答你的时间后完全改变你的问题。

您的问题至少被完全改变了 2 次。也许现在没人想回答了。

@Miladfaraji - 请参阅How to ask a good question。明确您的问题的性质，帮助我们为您提供帮助。

【参考方案1】：

你可以这样使用它：

if(document.getElementById("test").style.color === 'red') 
    document.getElementById("test").style.color = "black";
 else 
    document.getElementById("test").style.color = "red";

【参考方案2】：

目前还没有，因为目前您没有代码可以强制执行此操作。

这是一个思考如何实现这样的事情的问题。你有一个初始状态，然后你离开那个状态。

与初始状态有关的信息丢失了，因此您需要以某种方式保存它。

所以我们可以使用一个变量来存储初始颜色：

var init_colour = '#000';
function abc() 
    var
    el = document.getElementById("test"),
    colour_to_apply = !el.style.color ? 'red' : init_colour;
    el.style.color = colour_to_apply;

请注意我们如何检查应用哪种颜色 - 原始状态或更改后的状态（红色）。我们通过查看它是否已经为它的style.color 属性赋予了一个值来做到这一点。如果有，我们知道它已经是红色（即这不是第一次点击它）并恢复为初始颜色。如果没有，这是第一次，或者之前已恢复，因此我们应用更改后的状态（红色）颜色。

【讨论】：

哈...太好了，我确实回答了他最初提出的问题。现在问题已经改变了。