javascript - 将页面转换为矩阵样式

标签 javascript html css google-chrome google-chrome-extension

我想在 Google Chrome 中将我的网页转换为 The Matrix 风格,以便在夜间模式下更好地阅读。因此,我想到了编写一个 Google Chrome 扩展程序。我开始编写相同的脚本。

目标:

我想实现这样的目标。

在每个 HTML 页面中选择 body 标签,然后应用以下样式属性-

background-color :black;
color : lime;

我的看法:

这是我开始编程的方法,但它似乎不起作用。请指出我的错误,如果您能提出更好的建议,请提出。

<!doctype html>
<html>
<head>
    <script type="text/javascript">
        document.getElementsByTagName('body')[0].style.color = "lime";
        document.getElementsByTagName('body')[0].style.background-color = "black";
    </script>
</head>
<body>
    <p> Hello </p>
</body>

</html>

最佳答案

您的代码在 body 标记存在之前执行。您需要将其包装到 onload 函数中或将其放在网页末尾。

<script type="text/javascript">
    window.onload = function() {
      document.getElementsByTagName('body')[0].style.color = "lime";
      document.getElementsByTagName('body')[0].style.backgroundColor = "black";
    }
</script>

这将使页面有机会加载,body 标签将存在,然后允许通过 JavaScript 更改样式。

关于javascript - 将页面转换为矩阵样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16806871/

相关文章:

javascript - Fetch/Then 链行为异常

javascript - 点击 JQuery

html - 导航栏和 iframe 之间的空白

html - 导入特定 Material 图标

javascript - HTML5 拖放上传在 IE 10 版本以下不起作用

javascript - 对于发送到 Controller 的对象,我应该使用哪种语法?

html - 在固定的父 div 元素中将多个 div 元素定位在彼此的右侧

Javascript 在动态调用其他 js 文件中的另一个类时出现问题

javascript - 定位用户点击的特定链接

javascript - Android 浏览器 .click() 不工作 javascript