CSS3 속성 값을 가져오고 설정하는 js 구현 방법_javascript 기술

CSS3에 많은 속성이 추가된 것은 잘 알려져 있는데, 이는 읽고 쓸 때 이전만큼 편리하지 않습니다.

예:

left:100px">

행간 스타일만 다음과 같은 경우 고려해보면, 그것을 얻으려면 div.style.left만 필요하고, 설정할 때에는 div.style.left='100px'만 필요합니다. 매우 간단합니다.

하지만 css3은 출시됩니다

예:

-webkit-transform:translate(20px,-20px)" > ;

무엇을 해야 할까요? 겁에 질려. . .

설정은 매우 간단합니다.
div.style.webkitTransform='translate(20px,-20px) ' 카멜 케이스 작성 방법을 따르시면 됩니다.

얻을 때:
div.style.webkitTransform의 값은 'translate(20px,-20px)' 문자열입니다.
원하는 X 및 Y 값을 얻는 방법은 무엇입니까? 오랜 시간 동안 검색한 결과 간단한 해결책을 찾을 수 없었습니다. 문자열 가로채기나 정규 매칭을 통해서만 얻을 수 있습니다.

원하는 20과 -20을 얻는 정규 표현식을 작성하세요.

reg=/-?[0-9] /g 음수 기호와 숫자 일치

reg2= / -?[0-9] .?[0-9]*/g 소수점을 포함할 수 있음

그런 다음
div.webkitTransform.match(reg) //결과 [20, -20]를 검색하세요.
은 X 및 Y 값이 포함된 배열을 반환합니다.

동일함:
-webkit-transform:skew(20deg,-50deg) /* 기울이기(x축에 대해 기울어짐, y축에 대해 기울어짐)*/

-webkit- 변환: 행렬(1,0.4,0,1,0,0);

다양합니다. . .