0
브라우저에서로드 할 때, 브라우저 지원, 내가 생각하지 못한 것 등. 자바 스크립트로 선언 된 스타일의 대부분 또는 전부가 최종 사용자 대 CSS 스타일 시트?자바 스크립트 스타일 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>
자바 스크립트 :
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 (임시, 고민 모든 적용 자바 스크립트 내 스타일) :
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에 응용 프로그램의 백본으로 제한 했으므로 웹 응용 프로그램의 업그레이드 및 중단 가능성을 줄일 수 있습니다. 그것은 선호와 장수의 문제입니다 (제 의견으로는), 그렇지 않으면 저를 설득하려고하지 마십시오.
CSS가 더 빠르고 빠릅니다. –
이 자료를 되돌릴 수있는 자료가 있습니까? 선호도의 문제인가요, 아니면 당신에게 더 쉬운가? 그 이유는 무엇입니까? – jnthnjns
"resize"핸들러에서 모든 작업을 수행하면 ** 매우 ** 부진한 응용 프로그램이 생성됩니다. – Pointy