javascript - 不显眼的造型

标签 javascript html css

根据 this article :

well-written JavaScript code should contain as little CSS as possible

我想知道我是否可以在下面的演示中使用 class 或类似的方法:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Edit Element Style</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #000000;
        }
    </style>
</head>

<body>
    <div id="div"></div>
    <input type="text" id="input" value="#000000">
    <script>
        document.getElementById('input').oninput = function () {
            document.getElementById('div').style.background = this.value;
        };
    </script>
</body>

</html>

DEMO

最佳答案

总结评论中的答案,在这种情况下,由于您要根据大量可能的用户输入动态更改样式,因此使用 JavaScript 修改 CSS 是合适的。正如文章所说,您应该尽可能少地这样做,但在这种情况下这是有道理的。

关于javascript - 不显眼的造型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23718198/

相关文章:

javascript - 模拟 Angular JS Controller Jasmine

javascript - 跨机器安排和/或同步 HTML5 视频播放

css - CSS Top 和 Left 百分比值是否取决于屏幕分辨率?

javascript - 如何激活:focus on the input+button when a user click into the input?

javascript - React - Javascript 和 JSX 的条件渲染,条件包装组件

javascript - 简单的 JavaScript 不工作

jquery - 仅过渡背景图像大小,在 css 中? (未设置背景大小时)

javascript - 如何从下拉菜单中选择并调用javascript函数

html - 绝对和相对

javascript - 函数未被调用