ブラウザへのロード、ブラウザのサポート、私が思いもよらなかったことなどに関して言えば、大多数またはすべてのスタイリングを 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 に限定してきました。それは好みと長寿の問題です (私の意見では)。