Когда дело доходит до загрузки браузера, поддержки браузера, что-либо, о чем я, возможно, и не думал, и т. Д. Имеет ли подавляющее большинство или все ваши стили, объявленные в Javascript, повредит конечный пользователь, CSS stylesheet?Javascript Styling vs CSS stylesheets
я бросил вместе быстрый пример, показанный ниже, и так же, как это 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. Это вопрос предпочтения и долголетия (на мой взгляд), пожалуйста, не пытайтесь убедить меня в противном случае.
Css лучше и быстрее. –
Есть ли у вас какие-либо ресурсы, способные поддержать это? Это вопрос предпочтения или легче для вас, вот почему? – jnthnjns
Выполнение всего, что работает в обработчике «resize», приведет к ** очень-очень-очень медленному приложению. – Pointy