Javascript样式与CSS样式表

Javascript Styling vs CSS stylesheets

本文关键字：样式 CSS Javascript      更新时间：2023-09-26

当涉及到在浏览器上加载、浏览器支持、任何我可能没有想到的事情等时。与包含CSS样式表相比，在Javascript中声明绝大多数或全部样式会对最终用户造成伤害吗？

我举了一个快速的例子，如下所示，以及这个Fiddle

HTML:

<body onload="init();">
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>
</body>

Javascript：

var init = function() {
    // Using window object to set global variables
    // since global variables are attached to the window object anyway
    window.container = document.getElementsByClassName("container");
    window.row = document.getElementsByClassName("row");
    // Initialize variables
    window.rows = [];
    window.cols = [];
    // Get chidren counts but also setup for future use
    window.setCounts();
    // Now lets calculate the widths
    window.setWidths();
};
window.setCounts = function() {
    for (var c = 0; c < window.row.length; c++) {
        window.rows.push(window.row[c]);
        window.rows[c].row_count = 0;
        for (var i = 0; i < window.row[c].children.length; i++) {
            if (window.row[c].children[i].className === 'col') {
                window.rows[c].row_count += 1;
            }
        }
    }
};
// When the screen is resized we need to refactor the widths
window.onresize = function(event) {
    window.setWidths();
};
window.setWidths = function() {
    window.wWidth = window.innerWidth;
    window.wHeight = window.innerHeight;
    var container_width = window.wWidth * 0.95;
    var row_width = container_width * 0.98;
    for (var i = 0; i < window.container.length; i++) {
        window.container[i].style.width = (window.wWidth * 0.97) + "px";
        window.container[i].style.height = ((window.wHeight * 0.90)) + "px";
    }
    for (var c = 0; c < window.rows.length; c++) {
        window.rows[c].style.width = row_width + "px";
        for (var i = 0; i < window.rows[c].children.length; i++) {
            if (window.rows[c].children[i].className === 'col') {
                window.rows[c].children[i].style.width = (row_width / window.rows[c].row_count) + "px";
                window.rows[c].children[i].innerText = (row_width / window.rows[c].row_count) + "px";
            }
        }
    }
};

最后是CSS（临时的，考虑在Javascript中应用所有样式）：

div {
    overflow: hidden;
}
.container {
    margin: auto;
    margin-top: 5px;
    border: 1px solid red;
}
.row {
    margin: auto;
    margin-top: 5px;
    border: 1px solid black;
    clear: both;
}
.col {
    float: left;
    text-align: center;
}

请注意：
我想避免实现像JQuery这样的外部库，我知道使用JQuery会更容易完成上面的代码。到目前为止，我已经将我的外部库限制为AngularJS，因为它是应用程序的主干，这可以减少我的网络应用程序的升级和可能的中断。这是一个偏好和寿命的问题（在我看来），请不要试图说服我

CSS样式表可以在DOM完全加载之前加载，这意味着它们可以在显示DOM对象之前立即应用。

通过javascript直接应用于对象的CSS样式通常在DOM对象最初显示后应用，在解析DOM对象之前永远不能应用。例如，如果您希望在页面上隐藏一个对象，则在从<head>部分加载的CSS规则中指定该对象将确保该对象永远不可见。通过javascript指定CSS来隐藏对象可能会导致对象最初出现，然后javascript会运行来隐藏它。

此外，还有一个普遍的概念，即表示和行为之间的分离通常是可取的（由CSS控制的表示和由javascript控制的行为）。虽然我认为两者很少是完全可分离的，但在一个项目中，通常有不同的人主要致力于网站的"外观"answers"展示"，而不是致力于网站"互动"或"行为"，将控制这些不同方面的主要方面放在不同的地方对维护网站非常有用。例如，一家公司可能决定更改其配色方案，查找和修改一些CSS可能会简单得多，而不是搜索所有可能的javascript来查找所有颜色引用。

最后，如果在某些情况下需要使用javascript指定哪些对象接收特定的样式，那么您仍然可以将样式信息放在CSS规则中，并使用javascript向对象动态添加类。这样，表示仍然是在"更易于维护"的CSS规则中指定的。

尽管如此，CSS不可能无所不能。特别是，它不能进行计算，有时使用一些javascript来帮助实现目标，复杂的布局可能更简单或更可靠。这里的想法是选择最简单、最可维护的方式来实现您的目标，并尽可能地在表现和行为之间进行最大的分离。

CSS比JavaScript更易于维护，而且您可以使用CSS做一些很难用JavaScript模仿的事情。

像add/remove_class这样的机制使您能够充分利用CSS的动态特性。

您的示例代码看起来像是在进行一些维度计算。CSS不能总是处理这个问题，所以对于这个有限的用例，JavaScript可能更好。

相关文章：