HTML5 데이터 속성을 사용하는 CSS 값

HTML5 데이터 속성을 사용하는 CSS 값 [중복]

---

이 질문에 이미 답변이 있습니다.

• CSS3의 ATTR ()는 주요 브라우저에서 작동하지 언어 4 개 답변

width: attr(data-width);

HTML5의 data-속성을 사용하여 cssss를 사용할 수 있는 것과 동일한 방식으로 CSS 값을 알고 싶습니다 content. 현재는 작동하지 않습니다.

---

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

---

실제로는 기능에 대한 사전 계획이 있습니다. http://www.w3.org/TR/css3-values/#attr-notation

이 바이올린 은 필요한대로 작동하지만 지금은 작동하지 않습니다.

불행히도 여전히 초안이며 주요 브라우저에서 완전히 구현되지 않습니다.

그러나 content의사 요소에 작동합니다.

---

rules나중에 스타일에서 사용할 수있는 일부 css- javascript로 만들 수 있습니다 . http://jsfiddle.net/ARTsinn/vKbda/

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
    addRule("[data-width='" + i + "%']", "width:" + i + "%");
}

이렇게하면 다음과 같은 100 개의 의사 선택기가 생성됩니다.

[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }

참고 : 약간의 주제에서 벗어난 물건은 귀하 (또는 누군가)가 원하는 것이 도움이 될 수 있습니다.

---

오늘부터 dataCSS3 선언의 HTML5 속성에서 일부 값을 읽을 수 있습니다 . 에서 CaioToOn의 바이올린 CSS 코드는 사용할 수있는 data설정하는 속성을 content.

불행히도 width및 height(Google Chrome 35, Mozilla Firefox 30 및 Internet Explorer 11에서 테스트 됨) 작동하지 않습니다 .

그러나 Fabrice Weinberg 의 CSS3 attr () Polyfill 은 data-width및 data-height. 여기에서 GitHub 저장소 를 사용할 수 있습니다 : cssattr.js .

참고 URL : https://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute