JavaScript를 통해 CSS3을 동적으로 설정하기

column-count을 자바 스크립트를 통해 순서가 지정되지 않은 목록에 적용하고 싶습니다. 사전에 몇개의 열이 필요한지 알 수 없기 때문입니다.JavaScript를 통해 CSS3을 동적으로 설정하기

나는 Chrome과 IE10에서 작동하지만 FireFox와 Opera에서는 작동하지 않습니다.

var ul= document.getElementById('multi-columns'); 
ul.style['-moz-column-count'] = 4; 
ul.style['-webkit-column-count'] = 4; 
ul.style['column-count'] = 4;

Safari에서이 기능을 테스트하지는 않았지만 Chrome에서 작동하기 때문에 효과가 있다고 생각합니다.

왜이 기능이 FireFox 및 Opera에서 작동하지 않습니까? 해결 방법은 무엇입니까?

출처

2013-06-19 CookieMonster

접두사 이름을 줄이고 하이픈을 삭제해야합니다. 이 접두어 때를 제외하고 낙타 케이스를 사용 - 다음 첫 번째 문자가 너무 대문자로해야합니다

var ul= document.getElementById('multi-columns'); 
ul.style['MozColumnCount'] = 4; 
ul.style['WebkitColumnCount'] = 4; 
ul.style['columnCount'] = 4;

또는

ul.style.MozColumnCount = 4; 
ul.style.WebkitColumnCount = 4; 
ul.style.columnCount = 4;

당신은 이와 같은 기능을 사용하여이를 일반화 할 수 있습니다

function getSupportedProp(proparray){ 
    var root=document.documentElement //reference root element of document 
    for (var i=0; i<proparray.length; i++){ //loop through possible properties 
     if (proparray[i] in root.style){ //if property exists on element (value will be string, empty string if not set) 
      return proparray[i] //return that string 
     } 
    } 
} 

//SAMPLE USAGE 
var boxshadowprop = getSupportedProp(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']) //get appropriate CSS3 box-shadow property 
document.getElementById("mydiv").style[boxshadowprop]="5px 5px 1px #818181" //set CSS shadow for "mydiv"

출처

2013-06-19 04:42:15 K3N

JavaScript를 통해 CSS3을 동적으로 설정하기

답변

관련 문제