JavaScriptでCSS3スタイル設定 : css3とJavaScriptの連携
2012.03.19
この記事は最終更新日から1年以上が経過しています。
JavaScriptを用いたCSSのスタイル変更は通常、
element.style.backgroundColor = "#ff00000";
などのように element.style.attribute = value;
で変更が可能となっております。
CSS3のベンダープリフィックス付きのスタイル変更は以下のように
css3
-webkit-transform:translate(100px,0);
に変更する場合、
javaScript
.style.webkitTransform = "translate(100px,0)";
webkitTransformで-webkit-のベンダープリフィクス付きの指定が可能です。
その他のブラウザのベンダープリフィックスは ‘transform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’ で指定できます。
webkitの指定は「webkit」でも「Webkit」でも認識されるのですが、正しくはwebkitと最初は小文字のようです。 そのあとのプロパティは基本 -無しで頭を大文字で設定は可能のようです。
JavaScript CSS3プロパティ設定
-webkit-transform
例：
element.style.webkitTransform = "translate(100px,100px) rotate(30deg)"; element.style.webkitTransformOrigin = "left top";
-webkit-transition
例：
element.style.webkitTransitionProperty = "-webkit-transform"; element.style.webkitTransitionDelay= "0.2s"; element.style.webkitTransitionDuration = "0.5s"; element.style.webkitTransitionTimingFunction = "ease-out";
-webkit-border-radius
例：
element.style.webkitBorderRadius = "50px";
-webkit-box-shadow
例：
element.style.webkitBoxShadow = "2px 2px 6px 2px rgba(0,0,0,0.7)";
-webkit-gradient
例：
element.style.background = "-webkit-gradient(linear, left top, left bottom, from(#990), color-stop(0.5,#f0f), to(#066))";
-webkit-animation
例：
element.style.WebkitAnimationName = "test"; element.style.WebkitAnimationDuration = "400ms"; element.style.webkitAnimationIterationCount = 10; element.style.webkitAnimationTimingFunction = "ease-in-out";
等々でcss3の設定が行えます。 これらはHTMLにインラインで追加されるので注意です。
デモページ http://webcyou.com/demo/js/css3/index.html
まとめ
| CSS3 | JavaScript |
| box-shadow | elemmnt.style.webkitBoxShadow |
| transform | elemmnt.style.webkitTransform |
| transform:translate | elemmnt.style.webkitTransform = “translate(px,px)”; |
| transform:scale | elemmnt.style.webkitTransform = “scale(x,y)”; |
| transform:rotate | elemmnt.style.webkitTransform = “rotate(deg)”; |
| transform:skew | elemmnt.style.webkitTransform = “skew(deg)”; |
| transform-origin | elemmnt.style.webkitTransformOrigin |
| transform-style | elemmnt.style.webkitTransformStyle |
| transition-property | elemmnt.style.webkitTransformProperty |
| transition-duration | elemmnt.style.webkitTransitionDuration |
| transition-timing-function | elemmnt.style.webkitTransitionTimingFunction |
| transition-delay | elemmnt.style.webkitTransitionDelay |
| animation-name | elemmnt.style.webkitAnimationName |
| animation-duration | elemmnt.style.webkitAnimationDuration |
| animation-timing-function | elemmnt.style.webkitAnimationTimingFunction |
| animation-iteration-count | elemmnt.style.webkitAnimationIterationCount |
| animation-direction | elemmnt.style.webkitAnimationDirection |
| animation-play-state | elemmnt.style.webkitAnimationPlayState |
| animation-delay | elemmnt.style.webkitAnimationDelay |
|
background linear-gradient |
elemmnt.style.background = “-webkit-gradient(linear, ~~)”; |
| background radial-gradient | elemmnt.style.background = “-webkit-gradient(radial, ~~)”; |
| text-shadow | elemmnt.style.textShadow |
| box-sizing | elemmnt.style.webkitBoxSizing |
| border-radius | elemmnt.style.webkitBorderRadius |
| border-top-left-radius | elemmnt.style.webkitBorderTopLeftRadius |
| border-top-right-radius | elemmnt.style.webkitBorderTopRightRadius |
| border-bottom-left-radius | elemmnt.style.webkitBorderBottomLeftRadius |
| border-bottom-right-radius | elemmnt.style.webkitBorderBottomRightRadius |
| border-image | elemmnt.style.webkitBorderImage |
| border-image-source | elemmnt.style.webkitBorderImageSource |
| border-image-slice | elemmnt.style.webkitBorderImageSlice |
| border-image-width | elemmnt.style.webkitBorderImageWidth |
| border-image-outset | elemmnt.style.webkitBorderImageOutset |
| border-image-repeat | elemmnt.style.webkitBorderImageRepeat |
