변경 너비/높이

Question

내가 가지고있는 width가 data-percentage HTML 속성의 값에 따라 변경 다음 JS 코드 대신 http://jsfiddle.net/YYF35/

:

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-percentage='" + i + "%']", "width:" + i + "%"); 
} 

데모를 참조하십시오 width의 일부 요소에 대해 해당 요소를 변경하려고합니다. height

div 클래스에 따라 요소의 높이 또는 너비가 변경 될 수 있습니다 (코드 번호 data-percentage에 따라 다름).

나는과 같이, 그것을 다른 HTML 속성을 만들려하지 않습니다

는

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

jQuery를도 사용할 수 있습니다. 어떤 아이디어?

Answer 1

귀하의 코드 규칙을 추가하고있다. 당신이 정말로 그 일을해야 할 경우, 단지 규칙을 더 추가

이제

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

의 change-width 클래스 요소는 width 수정 자신의 것, 그리고 change-height 클래스 요소는 height 수정 한 것입니다 (그리고 당신이 사용할 수있는 둘 다 당신이 좋아하는 경우).

Answer 2

이 시도 :

$("div[data-percentage]").each(function(){ 

    $(this).css({ 
     width: $(this).attr('data-percentage') 
     //height: $(this).attr('data-percentage') 
    }); 
}); 

http://jsfiddle.net/YYF35/1/