このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

JavaScriptでCSS3スタイル設定 : css3とJavaScriptの連携

JavaScript

2012.03.20

この記事は最終更新日から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

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US