반응형
JavaScript로 CSS 규칙 값을 어떻게 읽습니까?
인라인 스타일에서 볼 수있는 형식과 같이 CSS 규칙의 모든 내용이 포함 된 문자열을 반환하고 싶습니다. 특정 규칙에 포함 된 내용을 알지 못해도이 작업을 수행 할 수 있기를 원하므로 스타일 이름 (예 : .style.width등)으로 만 빼낼 수 없습니다 .
CSS :
.test {
width:80px;
height:50px;
background-color:#808080;
}
지금까지 코드 :
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<classes.length;x++) {
if(classes[x].selectorText==className) {
//this is where I can collect the style information, but how?
}
}
}
getStyle('.test')
여기 에서 수정 하여 scunliffe의 답변을 기반으로합니다.
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
(classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
}
}
}
getStyle('.test');
"nsdel"에서 받아 들여진 답변은 문서에있는 하나의 스타일 시트에서만 사용할 수 있기 때문에 이것은 조정 된 전체 작업 솔루션입니다.
/**
* Gets styles by a classname
*
* @notice The className must be 1:1 the same as in the CSS
* @param string className_
*/
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
var ret;
if(classes[x].cssText){
ret = classes[x].cssText;
} else {
ret = classes[x].style.cssText;
}
if(ret.indexOf(classes[x].selectorText) == -1){
ret = classes[x].selectorText + "{" + ret + "}";
}
return ret;
}
}
}
}
주의 : 선택자는 CSS에서와 동일해야합니다.
솔루션 1 (크로스 브라우저)
function GetProperty(classOrId,property)
{
var FirstChar = classOrId.charAt(0); var Remaining= classOrId.substring(1);
var elem = (FirstChar =='#') ? document.getElementById(Remaining) : document.getElementsByClassName(Remaining)[0];
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
alert( GetProperty(".my_site_title","position") ) ;
솔루션 2 (크로스 브라우저)
function GetStyle(CLASSname)
{
var styleSheets = document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
if (styleSheets[i].rules ) { var classes = styleSheets[i].rules; }
else {
try { if(!styleSheets[i].cssRules) {continue;} }
//Note that SecurityError exception is specific to Firefox.
catch(e) { if(e.name == 'SecurityError') { console.log("SecurityError. Cant readd: "+ styleSheets[i].href); continue; }}
var classes = styleSheets[i].cssRules ;
}
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == CLASSname) {
var ret = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText ;
if(ret.indexOf(classes[x].selectorText) == -1){ret = classes[x].selectorText + "{" + ret + "}";}
return ret;
}
}
}
}
alert( GetStyle('.my_site_title') );
알아야 할 몇 가지 브라우저 차이점 :
주어진 CSS :
div#a { ... }
div#b, div#c { ... }
InsDel의 예에서 클래스는 FF에서 2 개의 클래스와 IE7에서 3 개의 클래스를 갖습니다 .
내 예는 이것을 설명합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
div#a { }
div#b, div#c { }
</style>
<script>
function PrintRules() {
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<rules.length;x++) {
document.getElementById("rules").innerHTML += rules[x].selectorText + "<br />";
}
}
</script>
</head>
<body>
<input onclick="PrintRules()" type="button" value="Print Rules" /><br />
RULES:
<div id="rules"></div>
</body>
</html>
function getStyle(className) {
document.styleSheets.item("menu").cssRules.item(className).cssText;
}
getStyle('.test')
참고 : "메뉴"는 CSS를 적용한 요소 ID입니다. "className"은 텍스트를 가져 오는 데 필요한 CSS 클래스 이름입니다.
정말 효과가있는 제안을 찾지 못했습니다. 여기에 클래스를 찾을 때 간격을 정규화하는 더 강력한 것이 있습니다.
//Inside closure so that the inner functions don't need regeneration on every call.
const getCssClasses = (function () {
function normalize(str) {
if (!str) return '';
str = String(str).replace(/\s*([>~+])\s*/g, ' $1 '); //Normalize symbol spacing.
return str.replace(/(\s+)/g, ' ').trim(); //Normalize whitespace
}
function split(str, on) { //Split, Trim, and remove empty elements
return str.split(on).map(x => x.trim()).filter(x => x);
}
function containsAny(selText, ors) {
return selText ? ors.some(x => selText.indexOf(x) >= 0) : false;
}
return function (selector) {
const logicalORs = split(normalize(selector), ',');
const sheets = Array.from(window.document.styleSheets);
const ruleArrays = sheets.map((x) => Array.from(x.rules || x.cssRules || []));
const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);
return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));
};
})();
Chrome 콘솔에서 실행중인 작업입니다.
다음은 페이지의 모든 규칙을 반복하는 코드입니다.
function iterateCSS(f) {
for (const styleSheet of window.document.styleSheets) {
const classes = styleSheet.rules || styleSheet.cssRules;
if (!classes) continue;
for (const cssRule of classes) {
if (cssRule.type !== 1 || !cssRule.style) continue;
const selector = cssRule.selectorText, style=cssRule.style;
if (!selector || !style.cssText) continue;
for (let i=0; i<style.length; i++) {
const propertyName=style.item(i);
if (f(selector, propertyName, style.getPropertyValue(propertyName), style.getPropertyPriority(propertyName), cssRule)===false) return;
}
}
}
}
iterateCSS( (selector, propertyName, propertyValue, propertyPriority, cssRule) => {
console.log(selector+' { '+propertyName+': '+propertyValue+(propertyPriority==='important' ? ' !important' : '')+' }');
});이 페이지에 불필요한 스타일을 보여주는 유사한 도우미 기능을 만들었습니다. <div>사용되지 않은 모든 스타일을 나열하는 본문 에 를 추가합니다 .
(방화범 콘솔과 함께 사용)
(function getStyles(){var CSSrules,allRules,CSSSheets, unNeeded, currentRule;
CSSSheets=document.styleSheets;
for(j=0;j<CSSSheets.length;j++){
for(i=0;i<CSSSheets[j].cssRules.length;i++){
currentRule = CSSSheets[j].cssRules[i].selectorText;
if(!document.querySelectorAll(currentRule).length){
unNeeded+=CSSSheets[j].cssRules[i].cssText+"<br>";
}
}
}
docBody=document.getElementsByTagName("body")[0];
allRulesContainer=document.createElement("div");
docBody.appendChild(allRulesContainer);
allRulesContainer.innerHTML=unNeeded+isHover;
return false
})()
더 완전한 결과를 얻기 위해 줄못의 대답을 수정했습니다. 이 메서드는 클래스가 선택기의 일부인 스타일도 반환합니다.
//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
var arStylesWithCSSSelector = [];
//in order to not find class which has the current name as prefix
var arValidCharsAfterCssSelector = [" ", ".", ",", "#",">","+",":","["];
//loop through all the stylessheets in the bor
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
//check for any reference to the class in the selector string
if(typeof classes[x].selectorText != "undefined"){
var matchClass = false;
if(classes[x].selectorText === cssSelector){//exact match
matchClass=true;
}else {//check for it as part of the selector string
//TODO: Optimize with regexp
for (var j=0;j<arValidCharsAfterCssSelector.length; j++){
var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];
if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
matchClass=true;
//break out of for-loop
break;
}
}
}
if(matchClass === true){
//console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
var styleDefinition;
if(classes[x].cssText){
styleDefinition = classes[x].cssText;
} else {
styleDefinition = classes[x].style.cssText;
}
if(styleDefinition.indexOf(classes[x].selectorText) == -1){
styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
}
arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
}
}
}
}
if(arStylesWithCSSSelector.length==0) {
return null;
}else {
return arStylesWithCSSSelector;
}
}
또한 jquery 선택기를 통해 제공하는 루트 노드의 하위 트리에 CSS 스타일 정의를 수집하는 함수를 만들었습니다.
function getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
//stack in which elements are pushed and poped from
var arStackElements = [];
//dictionary for checking already added css class definitions
var existingClassDefinitions = {}
//use jquery for selecting root element
var rootElement = $(selectorOfRootElement)[0];
//string with the complete CSS output
var cssString = "";
console.log("Fetching all classes used in sub tree of " +selectorOfRootElement);
arStackElements.push(rootElement);
var currentElement;
while(currentElement = arStackElements.pop()){
currentElement = $(currentElement);
console.log("Processing element " + currentElement.attr("id"));
//Look at class attribute of element
var classesString = currentElement.attr("class");
if(typeof classesString != 'undefined'){
var arClasses = classesString.split(" ");
//for each class in the current element
for(var i=0; i< arClasses.length; i++){
//fetch the CSS Styles for a single class. Need to append the . char to indicate its a class
var arStylesWithCSSSelector = getStyleWithCSSSelector("."+arClasses[i]);
console.log("Processing class "+ arClasses[i]);
if(arStylesWithCSSSelector != null){
//console.log("Found "+ arStylesWithCSSSelector.length + " CSS style definitions for class " +arClasses[i]);
//append all found styles to the cssString
for(var j=0; j< arStylesWithCSSSelector.length; j++){
var tupleStyleWithCSSSelector = arStylesWithCSSSelector[j];
//check if it has already been added
if(typeof existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] === "undefined"){
//console.log("Adding " + tupleStyleWithCSSSelector.styleDefinition);
cssString+= tupleStyleWithCSSSelector.styleDefinition;
existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] = true;
}else {
//console.log("Already added " + tupleStyleWithCSSSelector.styleDefinition);
}
}
}
}
}
//push all child elments to stack
if(currentElement.children().length>0){
arStackElements= arStackElements.concat(currentElement.children().toArray());
}
}
console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");
return cssString;
}
클래스가 동일한 선택기로 여러 번 정의 된 경우 위의 함수는 첫 번째 만 선택합니다. 이 예제에서는 jQuery를 사용합니다 (그러나 cab은 사용하지 않도록 비교적 쉽게 다시 작성 됨).
// IE에서 작동하지만 다른 브라우저는 확실하지 않습니다 ...
alert(classes[x].style.cssText);
이 버전은 페이지의 모든 스타일 시트를 살펴 봅니다. 내 필요에 따라 스타일은 일반적으로 20 개 이상의 스타일 시트 중 두 번째에서 마지막에 있었으므로 거꾸로 확인합니다.
var getStyle = function(className){
var x, sheets,classes;
for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
for(x=0;x<classes.length;x++) {
if(classes[x].selectorText===className) {
return (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText);
}
}
}
return false;
};
속성이 스타일 / 값으로 구문 분석되는 객체의 반환을 추가했습니다.
var getClassStyle = function(className){
var x, sheets,classes;
for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
for(x=0;x<classes.length;x++) {
if(classes[x].selectorText===className){
classStyleTxt = (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText).match(/\{\s*([^{}]+)\s*\}/)[1];
var classStyles = {};
var styleSets = classStyleTxt.match(/([^;:]+:\s*[^;:]+\s*)/g);
for(y=0;y<styleSets.length;y++){
var style = styleSets[y].match(/\s*([^:;]+):\s*([^;:]+)/);
if(style.length > 2)
classStyles[style[1]]=style[2];
}
return classStyles;
}
}
}
return false;
};
모든 스타일 시트를 검색하고 일치하는 항목을 키 / 값 개체로 반환하는 버전을 만들었습니다. startWith 를 지정 하여 자식 스타일과 일치 시킬 수도 있습니다 .
getStylesBySelector('.pure-form-html', true);
보고:
{
".pure-form-html body": "padding: 0; margin: 0; font-size: 14px; font-family: tahoma;",
".pure-form-html h1": "margin: 0; font-size: 18px; font-family: tahoma;"
}
에서:
.pure-form-html body {
padding: 0;
margin: 0;
font-size: 14px;
font-family: tahoma;
}
.pure-form-html h1 {
margin: 0;
font-size: 18px;
font-family: tahoma;
}
코드:
/**
* Get all CSS style blocks matching a CSS selector from stylesheets
* @param {string} className - class name to match
* @param {boolean} startingWith - if true matches all items starting with selector, default = false (exact match only)
* @example getStylesBySelector('pure-form .pure-form-html ')
* @returns {object} key/value object containing matching styles otherwise null
*/
function getStylesBySelector(className, startingWith) {
if (!className || className === '') throw new Error('Please provide a css class name');
var styleSheets = window.document.styleSheets;
var result = {};
// go through all stylesheets in the DOM
for (var i = 0, l = styleSheets.length; i < l; i++) {
var classes = styleSheets[i].rules || styleSheets[i].cssRules || [];
// go through all classes in each document
for (var x = 0, ll = classes.length; x < ll; x++) {
var selector = classes[x].selectorText || '';
var content = classes[x].cssText || classes[x].style.cssText || '';
// if the selector matches
if ((startingWith && selector.indexOf(className) === 0) || selector === className) {
// create an object entry with selector as key and value as content
result[selector] = content.split(/(?:{|})/)[1].trim();
}
}
}
// only return object if we have values, otherwise null
return Object.keys(result).length > 0 ? result : null;
}
저는 순수 형식 프로젝트의 일부로 프로덕션에서 이것을 사용하고 있습니다. 도움이 되었기를 바랍니다.
@dude 답변에 따라 객체의 관련 스타일을 반환해야합니다. 예를 들면 다음과 같습니다.
.recurly-input {
display: block;
border-radius: 2px;
-webkit-border-radius: 2px;
outline: 0;
box-shadow: none;
border: 1px solid #beb7b3;
padding: 0.6em;
background-color: #f7f7f7;
width:100%;
}
다음을 반환합니다.
backgroundColor:
"rgb(247, 247, 247)"
border
:
"1px solid rgb(190, 183, 179)"
borderBottom
:
"1px solid rgb(190, 183, 179)"
borderBottomColor
:
"rgb(190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190, 183, 179)"
borderLeft
:
"1px solid rgb(190, 183, 179)"
borderLeftColor
:
"rgb(190, 183, 179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px solid rgb(190, 183, 179)"
borderRightColor
:
"rgb(190, 183, 179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px solid rgb(190, 183, 179)"
borderTopColor
:
"rgb(190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%"
암호:
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
return _.pickBy(classes[x].style, (v, k) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
}
}
}
}
참고 URL : https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript
반응형
'Programing' 카테고리의 다른 글
| CDN이 실패 할 경우 로컬 스타일 시트 (스크립트 아님)로 대체하는 방법 (0) | 2020.08.14 |
|---|---|
| Express 4.0, 이상한 경고 메시지가있는 익스프레스 세션 (0) | 2020.08.14 |
| Dart가 기존 JavaScript 라이브러리 사용을 지원합니까? (0) | 2020.08.14 |
| ResultSet을 JSON으로 가장 효율적으로 변환합니까? (0) | 2020.08.14 |
| 소켓 프로그래밍과 Http 프로그래밍의 차이점 (0) | 2020.08.14 |