프로그래밍 방식으로 단일 HTML 요소에서 CSS 스타일 규칙을 제거합니다.

스타일이 전혀없는 문서에서 일부 HTML 요소를 추가하고 싶습니다. 그러나 나는이 요소들이 프로젝트, 웹 페이지 또는 다른 어떤 것에도 관계없이 다르게 보일 것임을 확신해야합니다. 이러한 요소는 Javascript에 의해 페이지에 삽입되며 SPAN이됩니다.프로그래밍 방식으로 단일 HTML 요소에서 CSS 스타일 규칙을 제거합니다.

제 아이디어는 SPAN을 문서의 텍스트 조각 스타일에 추가하는 것입니다. 그러나 이전에 SPAN 요소에 어떤 스타일이 추가되었을 수 있습니다. 그러면 예상 한 결과가 변경됩니다.

그래서 위젯을 쓰고 있고 여러분 중 누구라도 자신의 웹 페이지에서 사용할 수 있다고 가정 해 보겠습니다. 이 때문에 스타일 시트를 직접 변경하는 것과 같이 요소의 스타일을 직접 변경하는 데 많은 시간을 할애 할 수 없습니다. 솔루션은 자바 스크립트로 구현되어야합니다. JQuery는 원하지 않는다.

<head> 
    <style> 
    span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
    } 
    </style> 
</head> 

<body> 
    <span class='a_regular_span'>This text must be bold and anything else</span> 
    <span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span> 
</body>

아이디어가 있으십니까?

출처

2013-11-28 Victor Ferreira

이걸 시도 할 수 있습니까?

<style> 
     span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
     } .a_regular_span span{ font-weight: normal; 
     /*anything else goes below*/ 
    } 

</style>

출처

2013-11-28 20:11:20 Xarxas

그래서 내가 위젯을 쓰고 있어요 당신의 자신의 웹 페이지에 그것을 를 사용 할 수있다 가정하자. 이것은 내가 직접

당신은 scoped 속성을 가진 style 요소를 사용할 수있는 요소의 스타일을 변경하기 위해 많은 것을 할 수없는 이유입니다. 이렇게하면 페이지의 다른 부분에 영향을주지 않고 요소 만 스타일을 지정할 수 있습니다.

하지만 이전 브라우저에서는 지원하지 않습니다.

그리고 당신은 당신이 정말로 페이지의 다른 요소의에서 요소의 스타일을 분리하려면 How can I prevent CSS from affecting certain element?

출처

2013-11-28 20:12:51 Oriol

범위가 지정된 메소드는 다른 CSS 스타일을 무시할 수 있지만. 잘못된 위치에 스팬을 삽입하면 다른 스팬의 스타일이 엉망이됩니다. –

네, 좀 더 일반적인 해결책이 필요 하겠지만,'scoped'에 대한 설명을 읽음으로써 내가 이해 한 것은 다른 요소들이 그 규칙들을 상속받지 않는다는 것입니다. 특정 요소에 의해 상속받지 않도록 다른 규칙이 필요합니다. –

@VictorFerreira 그런 다음 몇 시간 전에 만든 질문을보십시오. [CSS가 특정 요소에 영향을 미치지 않도록하려면 어떻게합니까?] (http://stackoverflow.com/questions/17407424/how-can-i-prevent-css-from) -affecting-certain-element) – Oriol

를 참조하십시오 요소에 영향을 미칠 페이지의 스타일을 원하지 않는 경우, 당신은 사용자 정의를 사용할 수 태그를 추가하십시오.

예를 들어 span을 사용하는 대신 customspan을 사용하여 원하는 방식으로 해당 요소의 스타일을 지정할 수 있습니다.

<head> 
    <style> 
    span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
    } 
    </style> 
</head> 

<body> 
    <span class='a_regular_span'>This text must be bold and anything else</span> 
    <customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan> 
</body>

출처

2013-11-28 20:26:38 tjscience

흠, 나에게 좋은 소리. 코드는 유효하지 않을 것입니다, 맞죠? 하지만 멋진 단계입니다. –

태그가 유효하지 않지만 여전히 브라우저에 의해 렌더링됩니다. 스팬 태그 사용을 주장하는 경우 완벽한 솔루션이 없습니다.동일한 사이트/도메인 내에서 공통 태그는 iframe 내부에 있어도 javascript로 수정할 수 있습니다. –

프로그래밍 방식으로 단일 HTML 요소에서 CSS 스타일 규칙을 제거합니다.

답변

관련 문제