Question

当涉及加载浏览器，浏览器支持，我可能没有想到的任何东西等等。在Javascript中声明的绝大部分或全部样式是否会伤害最终用户并包括CSS样式表？

我将一个快速示例汇总在一起，如下所示，以及此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，因为它是应用程序的主干，这样可以减少我的webapp升级和可能的中断。这是一个偏好和长寿的问题（在我看来），请避免试图说服我。

Answer 1

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

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

此外，有一个一般概念，即表达和行为之间的分离通常是可取的（由CSS控制呈现和由javascript控制的行为）。虽然我认为两者很少可以完全分离，但是项目中通常有不同的人主要处理网站的“外观”和“演示”，而不是网站的“交互性”或“行为”。并且在不同的地方保持控制这些不同方面的主要方面对于维护站点非常有用。例如，公司可能决定更改其配色方案，查找和修改某些CSS可能会更加简单，而不是搜索所有可能的javascript以查找所有颜色参考。

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

所有这一切，CSS无法做到一切。特别是，它无法进行计算，有时复杂的布局可能更简单或更可靠，使用一些JavaScript来帮助实现您的目标。这里的想法是选择最简单，最易维护的方式来实现您的目标，尽可能将表达和行为分开。

Answer 2

CSS比JavaScript更易于维护，你可以使用很难用JavaScript模仿的CSS。

像add / remove_class这样的机制可以让你充分利用CSS动态。

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

Javascript样式与CSS样式表

2 个答案: