2011-04-26 6 views
10

CSS에서 새 속성을 만들 수 있습니까? 예를 들어, 사진을 표시하는 컨트롤을 개발 중이며 css에 속성을 추가하여 사진 주위에 어떤 스타일 프레임을 포함 할지를 제어한다고 가정 해보십시오. 같은 뭔가 :새 CSS 속성을 만들 수 있습니까?

#myphoto { frame-style: fancy } 

크로스 브라우저 호환 방식으로이 작업을 수행 할 수있는 방법이 있나요, 당신이 어떻게 스타일이 상속 여부 정의 할 것인가?

EDIT : 사용자 정의 컨트롤입니다. JS 코드가 스타일을 처리 할 것입니다. 브라우저가 마술처럼 무엇을해야하는지 알지 못할 것 같습니다. 사용자가 CSS 대신 CSS로 스타일을 지정할 수 있기를 바랍니다.

+1

예는 실제 CSS 사양과 같습니다 :) – galymzhan

답변

10

물론 그렇습니다. 이것을 예로 들면 다음과 같습니다 : http://bililite.com/blog/2009/01/16/jquery-css-parser/

속성 대신 CSS 클래스를 사용할 수 있습니다. 그게 당신이하고있는 일을하는지 확실하지 않습니다.

+2

jQuery는 무엇을 할 수 없습니까? : O – BoltClock

+3

밤의 어리석은 시간에 내가 잠들지 못하게 막을 수는 없습니다. – Jordan

4

수 없습니다. 브라우저는 자신의 layout engines 코드 작성 방법에 따라 CSS를 해석합니다.

WebKit 또는 Gecko와 같은 기존의 오픈 소스 엔진을 사용하지 않는 한 사용자 정의 CSS를 처리하는 사용자 정의 코드를 추가하고 사용자 정의 된 레이아웃 엔진을 사용하는 브라우저를 만들었습니다. 그러나 구현만으로 사용자 정의 CSS를 이해할 수 있습니다.

수정 : 스타일을 어떻게 든 읽을 수 있는지에 따라 다릅니다. 일반적으로 브라우저는 인식하지 못하는 속성을 즉시 즉시 버리고 CSS 코드가 DOM의 일부가 아니기 때문에 CSS는 일반적으로 JavaScript로 연결할 수 없습니다.

또는 Jordan's answer을 볼 수 있습니다.

+0

나는이 질문에 대한 답변을 확신합니다.플렉스에 의해 수평 적으로 제공되는 요소를 배포하기위한 솔루션에는 원하는 특정 동작이 없다는 것을 알게되었습니다. 공백이 가장 가깝지만, 바깥 쪽 요소가 각 내부 요소가 컨테이너와 같은 거리가되도록하려면 운이 좋지 않은 것 같습니다. - javascript 내에서 동작을 작성하도록 설정했으나 실제로 말하는 내용이 사실이라면 구현할 수 없습니다. – Musixauce3000

1

JS 라이브러리를 사용하지 않는 스트레이트 JavaScript 솔루션을 선호하는 경우 배경 이미지의 쿼리 문자열을 사용하여 CSS에 "사용자 정의 속성"을 유지할 수 있습니다.

HTML

<div id="foo">hello</div> 

CSS

#foo { 
    background: url('images/spacer.gif?bar=411'); 
} 

자바 스크립트

getCustomCSSProperty('foo', 'bar'); 

지원하는 자바 스크립트 함수

function getCustomCSSProperty(elId, propName) 
{ 
    var obj = document.getElementById(elId); 
    var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image'); 
    var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi); 
    return getParameterByName(propName, biurl[1]); 
} 

function getParameterByName(name, qs) { 
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs); 
    return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); 
} 

데모 : http://jsfiddle.net/t2DYk/1/

설명 : 내가 IE 5.5-9, 크롬, 파이어 폭스, 오페라에서 솔루션을 테스트 한 http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html

, 및 사파리.

관련 문제