CSS 또는 자바 스크립트를 사용하여 다른 CSS 스타일에서 기존 CSS 스타일을 참조 할 수 있습니까?

나는 스타일은 내가 두 번째 스타일에서 참조 할 수 CSS 또는 자바 스크립트를 사용하여 다른 CSS 스타일에서 기존 CSS 스타일을 참조 할 수 있습니까?

.style1 
{ 
    width: 140px; 
}

을 정의한 경우?

.style2 
{ 
    ref: .style1; 
}

또는 javascript/jQuery를 통해 방법이 있습니까?

--- 편집

, 나는 CSS로 CSS를 변경하지 않고 #x를하고 #C .X하고이 .c에 대해 정의 된 어떤 스타일 적용하기 위해 노력하고 문제를 명확히하려면해야 할 것입니다 내 통제에서 벗어나는 업데이트.

폭을 사용했지만 실제로 스타일은 글꼴, 테두리 및 기타 스타일 요소가 지정 될 때 더욱 복잡합니다.

스타일을 클래스에 적용 할 때 여러 클래스 이름을 지정하면 기존 응답을 답변으로 표시하지만 ID에 적용되는 스타일을 적용하고 클래스 스타일에도 적용해야합니다. .. 그게 말이된다면.

출처

2008-10-08 JTew

CSS로 할 수있는 방법이 없습니다. 요청한 기능이지만 아직 사양에 포함되어 있지 않습니다. 또한 JS 직접 그것을 할 수 없지만 해키 해결 방법의 종류가있다 :

$('.style2').addClass ('style1');

출처

2008-10-08 03:50:41

교묘 한 트릭. :) –

당신이 요소는 여러 스타일을 상속 할 수 있도록하여 동일한 기능을 얻을 수 있습니다. 전의. 예를 들어

<p class="style1 style2">stuff</p>

다음 CSS가 포함됩니다 :

.style1 {width:140px;} 
.style2 {height:140px;}

편집 : 실제로 로버트의 대답은 더 사용할

.style1, .style2 {width: 140px;} 
.style2 {height: 140px;} 

<p class="style2">i will have both width and height applied</p>

출처

2008-10-08 03:51:23 Owen

이 스타일은 유감스럽게도 스타일과 프리젠 테이션을 병합합니다. 마크 업에 스타일 별 정보를 포함 시키려면'style = ""속성을 추가하십시오. –

John의 대답은 제가 시도한 것에 더 가깝습니다. 달성 할 수있는 방법이 있다면 jQuery로 좀 더 플레이 할 것입니다. 정확히 내가 원하는 것을해라. – JTew

방법 중 하나를 달성하려고하는 방법을 대략 수 여러 블록에 대해 동일한 코드는 다음과 같습니다.

.style1, .style2 { width: 140px; }

출처

2008-10-08 03:52:17

일부 옵션 :

가 즉시 또는 (I 글꼴, 숫자 및 색상에 대한 상수를 구현하는 비주얼 스튜디오 매크로를 사용하여 스타일 시트를 제작하고로 중, 동적으로 CSS를 생성 - 그리고에 밝은 색/어두운 색조 계산). 이 주제는이 사이트의 다른 곳에서 많이 논의되었습니다. 당신이 140px 넓은 스타일이 있고 당신이 그 모든 스타일에 대한 그 차원을 변경하는 유연성을 갖고 싶어

, 당신이 할 수 있습니다 :

div.FixedWidth {width:140px;} 
div.Style1 {whatever} 
div.Style2 {whatever}

및

<div class="Style1 FixedWidth">...</div> 
    <div class="Style2 FixedWidth">...</div>

출처

2008-10-08 04:14:49

계산 된 스타일을 특정 요소에 설정하고 두 번째 요소에 적용하는 것에 대해 이야기하고 있습니까?

그렇다면 요소의 계산 된 스타일을 반복하여 다른 요소의 cssText 속성에 적용하여 인라인 스타일로 설정해야 할 필요가 있다고 생각합니다.

뭔가 같은 :

el = document.getElementById('someId'); 
var cStyle = ''; 
for(var i in el.style){ 
    if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; });

당신은 CSS 속성의 유한 집합을 처리 할 수 있습니다 알고 있다면, 당신은 위의 단순화 수 있기 :

el = $('#someId'); 
var styleProps = {'border-top':true,'width':true,'height':true}; 
var cStyle = ''; 
for(var i in styleProps){ 
    cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; });

내가주의 할 것 위의 코드는 IE가 Mozilla와 같은 HTMLElement의 스타일 속성에 대한 CSSStyleDeclaration 객체를 반환하는지 여부를 확신하지 못합니다 (첫 번째 예). 위의 테스트를하지 않았으므로 의사 코드로만 사용하십시오.

출처

2009-05-14 19:14:24 ajm

동료와 나는 약간의 뒤에서 다음과 같이 위로 감았 다. var el = $ ('h1') [0]; var cStyle = ''; 위한 (VAR el.style I)에서 { 경우 (대해서 typeof el.style [I] = '기능'!) { cStyle + = i.replace (/ ([AZ])/g '- $ 1 '). toLowerCase() + ': '+ (문서.defaultView.getComputedStyle (el, null). getPropertyValue (i) || 'none') + ';' }} // cStyle $ ('someClass.') 각각 (함수() { this.style.cssText = cStyle]. 를} – ajm

또 다른 방법은 적은 양과 적은 양의 전처리 도구를 사용하는 것입니다. 그런 다음 less/sass 파일을 컴파일하면 정상적인 CSS가됩니다.

여기에 less 및 sass의 설명서가 있습니다.

// example of LESS 

#header { 
h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
p { font-size: 12px; 
    a { text-decoration: none; 
    &:hover { border-width: 1px } 
    } 
    } 
} 


/* Compiled CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
border-width: 1px; 
}

출처

2013-10-04 01:00:29 joydesigner

나는이 똑같은 것을 시도하고이 웹 페이지를 발견했다. 이를 수행하는 직접적인 방법은 없습니다. IE :

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b { font-size: 24pt; } 
.c { b } 
</style></head><body> 
<span class='c'>This is a test</span></body></html>

는 하지 작업을 수행합니다. 여기서 문제는 (나와 같은) 당신이 논리적 인 방식으로 일을하려한다는 것입니다. (예 : A-then-B-then-C)

다른 사람들도 지적했듯이 이것은 작동하지 않습니다. 그것은 작동해야하고 CSS는 많은 다른 기능을 가져야합니다. 그렇게하면 해결할 필요가 없습니다. 일부는 이미이 문제를 해결하기 위해 jQuery 방법을 게시했지만 약간 수정하면 원하는 것을 얻을 수 있습니다.

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
</style></head><body> 
<span class='c'>This is a test</span></body></html>

이것은 다른 방식으로도 동일한 효과를냅니다. "a"또는 "b"를 "c"에 할당하는 대신 "a"또는 "b"에 "c"를 지정하십시오. 나머지 코드에도 영향을 미치지 않고 동일한 효과를 얻을 수 있습니다.

다음 질문은 "여러 CSS 항목에 대해이 작업을 수행 할 수 있습니까?"(예 : font-size, font-weight, font-family?) 대답은 "예"입니다. C 부분 "당신이 그것의 일부가 그 모든 일 할 일의 각 상 부분은"이 .c ""의 일부가 될 것 "

<html> 
<head> 
<title>Test</title> 
<style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
.d { font-weight: normal; } 
.e,.c { font-weight: bold; } 
.f { font-family: times; } 
.g,.c { font-family: Arial; } 
</style> 
</head> 
<body> 
<span class='c'>This is a test</span> 
</body> 
</html>

난 당신이 생각하는 방식을 좋아 :)

출처

2015-05-08 19:18:38

CSS 또는 자바 스크립트를 사용하여 다른 CSS 스타일에서 기존 CSS 스타일을 참조 할 수 있습니까?

답변

관련 문제