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 はアプリケーションのバックボーンであるため、外部ライブラリを AngularJS に限定してきました。それは好みと長寿の問題です (私の意見では)。

4

2 に答える 2