CSS의 동적 또는 적응 클래스

나는 다양한 항목의 항목을 표시 할 때 문제점이 있으며 세트에 대해 균일하게 갱신되는 여백 설정을 갖습니다. 내가 [1,2,3,4,5]입니다 세트가 경우에 따라서 기본적으로 CSS의 동적 또는 적응 클래스

는 간단 넣어 그것을 수 있습니다 뭔가 같은 :

1  2  3  4  5

번호의 숫자가 있다면 잠시 나는이에 대한 몇 가지 솔루션을 가지고 있지만 내가 가지고있는 경우 (여백이 지정된 세트에 걸쳐 균일이기 때문에) 내가 무엇 히트가 css-class 나는를 공유 할 수

1 2 3 4 5 6 7 8 9 10

: 그들은 동일한 양의 공간을 필요로 두 배로 형세. 그래서 가능하다면 어떤 정보도 찾지 못했다면 클래스를 동적으로 업데이트 할 수 있다면 그것을 좋아할 것입니다. 그래서 첫 번째 예제에서 마진은 margin-right: 10px; 인 것으로 가정하면 if 클래스를 변경할 수 있습니다. (요소에 대해 style을 설정하는 것과 비슷하게 생각합니다. 전체 클래스에서 생각할 수 있습니다.) 정말 부드럽습니다. 그래서 클래스를 가질 수의이 작업을 수행 할 수있는 기능을 가정 해 봅시다 :

.myclass { 
    margin-right: 10px; 
}

우리 마법 기능 .myclass.setProperty('margin-right', '5px'); 통해

(또는 구문이 될 것입니다 무엇 : P). 마치 클래스를 정의한 것처럼 행동 할 것입니다.

.myclass { 
    margin-right: 5px; 
}

나는 지금까지 내 생각과 문제를 파악하기에 충분합니다. 내가 지금 당장 그것에가는 방법은 모든 공유 된 행동에 대해 클래스를 사용하고 각 요소에 스타일을 설정하는 것입니다. new_margin는 규모에 따라 계산됩니다

for (var i in mynumbers) { 
    mynumbers.style.marginRight = new_margin; 
}

가 (즉, 그것은 시간의 짧은 기간에 여러 번 변경 될 수 있습니다) : 뭔가처럼 될 그러나이 조금 지루한이다.

그래서 질문 부분에. 첫 번째 부분 (동적으로 클래스를 변경하는 방법)이나, 생각이나 아이디어를 구현하는 방법과 같은 것을 달성 할 수있는 방법이 있습니까? 예를 들어 내가하는 방식이 좋지 않다고 생각하거나 더 나은 점이 있다면 이것을 처리하는 방법.

읽기에 감사 드리며 흥미로운 점이 있으시길 바랍니다.

출처

2014-12-12 qrikko

Flexbox는 친구입니다. –

@ 토라자부로 누군가와 나를 똑같이 생각하는 것을보고 흥분한다. 그것은 2010 년대이고 사람들은 여전히 지난 세기의 브라우저를 지원할 수있는 테이블 레이아웃을 고수하고 있습니다. 그게 슬픈 일입니다. – Leo

예,'* {display : flex; }'접근! –

아, 플렉스 레이아웃의 또 다른 일반적인 사용 사례 :

.container { 
 
    display: flex; 
 
    border: 1px solid; 
 
    justify-content: space-between; 
 
}

<h2>5 elements in a line with equal width gaps</h2> 
 
<div class="container"> 
 
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> 
 
</div> 
 

 
<h2>10 elements in a line with equal width gaps</h2> 
 
<div class="container"> 
 
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> 
 
    <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> 
 
</div>

을 브라우저가이 기능을 지원하면 다음과 같이 표시됩니다. enter image description here

여기는 browser compatibility입니다. 또 다른 흥미로운 사용 사례, 영업 이익에 대해 물어 보지 않았지만 : 편집

: 브라우저가 기능을 지원하는 경우,이 같은 것을 볼 것입니다

.container { display: flex; border: 1px solid; justify-content: space-between; } .container:before, .container:after { content: ''; width: 0; }

<h2>5 elements in a line with equal width gaps</h2> <div class="container"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div> <h2>10 elements in a line with equal width gaps</h2> <div class="container"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> </div>

공간은 요소들 사이에서 똑같이 나누어 질뿐만 아니라, tainer. 코드가 얼마나 간단한 지 알 수 있습니다.

출처

2014-12-12 06:17:13 Leo

이것은 table-layout: fixed의 직업처럼 들립니다. 브라우저는 "테이블"의 열 수를 기반으로 첫 번째 "테이블 행"에있는 각 "열"(요소)의 너비를 계산합니다.

.table { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
.table > span { 
 
    display: table-cell; 
 
    text-align: center; 
 
}

<div class="table"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
    <span>9</span> 
 
</div> 
 

 
<div class="table"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
</div>

출처

2014-12-12 05:56:54 Wex

예. 이것은 가능하다. 클래스의 속성을 변경하면 브라우저의 렌더러가 전체 페이지의 레이아웃을 다시 계산할 수 있습니다 (클래스 변경이 전체 레이아웃에 미치는 영향을 파악해야 함). 따라서 마진을 변경하려는 경우 - 변경 사항을 애니메이션으로 표현하는 방식으로 페이지의 복잡성에 따라 실적이 좋지 않을 것입니다.말했다 즉, 여기에 모든 IE9 +에서 작동해야 신속하고 더러운 구현 :

<html> 
<head> 
<style> 
.thing { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background: #f00; 
} 
</style> 
</head> 
<body> 
<div> 
    <div class="thing myClass"></div> 
    <div class="thing myClass"></div> 
    <div class="thing myClass"></div> 
    <div class="thing myClass"></div> 
    <div class="thing myClass"></div> 
    <div class="thing myClass"></div> 
</div> 

<div> 
<button id="doit">Make bigger</button> 
</div> 
</body> 
<script> 
var styleTag = document.createElement("style"), 
    styleSheet, index, cssRule, style; 

// Create a <style> tag that will hold our CSS rule 
document.head.appendChild(styleTag); 
styleSheet = styleTag.sheet; 

// Insert an empty .myClass rule into the style sheet 
index = styleSheet.insertRule(".myClass {}", styleSheet.cssRules.length); 

// Get the 'style' object from the rule. This is nearly identical to elem.style 
cssRule = styleSheet.cssRules[index]; 
style = cssRule.style; 

// Sets .myClass { margin-right: 5px; } 
style.marginRight = "5px"; 

// Demo to show that it works when you click a button 
document.querySelector("#doit").addEventListener("click", function() { 
    style.marginRight = "20px"; 
}); 

</script> 
</html>

출처

2014-12-12 06:14:19 dbcb

CSS의 동적 또는 적응 클래스

답변

관련 문제