0

当涉及到在浏览器上的加载、浏览器支持以及我可能没有想到的任何事情等方面。在 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，因为它是应用程序的主干，这可以减少我的 web 应用程序中的升级和可能的中断。这是一个偏好和长寿的问题（在我看来），请避免试图说服我。

4

2 回答 2

6

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

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

此外，还有一个一般概念，即通常需要将表示和行为分开（表示由 CSS 控制，行为由 javascript 控制）。虽然我认为这两者很少完全分离，但在一个项目中通常有不同的人，他们主要致力于网站的“外观”和“呈现”，而不是专注于网站的“交互性”或“行为”并将控制这些不同方面的主要方面保存在不同的地方对于维护站点非常有用。例如，一家公司可能决定更改他们的配色方案，查找和修改某些 CSS 可能比搜索所有可能的 javascript 来查找所有颜色参考要简单得多。

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

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

于 2013-08-28T16:42:25.737 回答
3

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

add/remove_class 等机制使您能够充分利用 CSS 动态。

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

于 2013-08-28T16:41:33.587 回答