jsが3つのcssスタイルを変更する方法について

3478 ワード

夜は勝手にdemoを書いて、jsで特定の方法で画像の位置を修正したり、widthやheightなど、予想通りのアニメーションを完成したりします.

問題は次のとおりです。


最初はcssファイルには画像のposition:absoluteが設定されています.leftなどの属性は、今彼のleftをleft-=left+tempに設定したいと思っています.エレメントを取得するleftです.
以前はよく考えていなかったが、毎回$(「img」)だった.style.leftでいいですが、今回alertで出てきたのは意外にも空の文字列です.今考えてみろstyleはラベルのstyleプロパティを取得し、他のサブプロパティを順次取得します.だからstyle.行内スタイルのみ取得できます.そこでなんとかやった.cssのプロパティ.

深く入り込む


headのstyleのcssを取得するにはどうすればいいですか?cssファイルのプロパティは?
IEにはobjが使用する.CurrentStyleメソッド,FFはgetComputedStyleメソッドを用いる.
function getDefaultStyle(obj,attribute){ 

        return obj.currentStyle ? obj.currentStyle[attribute]

            : document.defaultView.getComputedStyle(obj,false)[attribute];   

}

または、
function getDefault(obj){ 

          return obj.currentStyle ?  obj.currentStyle

            :document.defaultView.getComputedStyle(obj,false);   

}

例:javascriptを使用してcss classのプロパティを変更...
.orig { 

        display: none; 

} 

 
彼のdisplayプロパティをnoneからinlineに変更したいです.解決方法:IEの中で:
document.styleSheets[0].rules[0].style.display = "inline";

firefoxでは:
document.styleSheets[0].cssRules[0].style.display = "inline";

ディスカッション:特定の名前のstyleオブジェクトを検索する関数を作成できます.
function getstyle(sname) { 

    for (var i=0;i< document.styleSheets.length;i++) { 

        var rules; 

        if (document.styleSheets[i].cssRules) { 

            rules = document.styleSheets[i].cssRules; 

        } else { 

            rules = document.styleSheets[i].rules; 

        } 

        for (var j=0;j< rules.length;j++) { 

            if (rules[j].selectorText == sname) { 

                return rules[j].style; 

            } 

        } 

    } 

}

そして、
getstyle(".orig").display = "inline";

まとめ:


前に述べたのはどのように外部チェーンを検索したり修正したりするかです.cssですが、だめなのは、私たちはそんなことはできません.ieとfirefoxでは確かに実現できますが、私たちは提唱しません.
chromeの中のcssRulesはnullで、stackoverflowの中でドメインをまたぐと言っていますが、存在しないでしょう.だから、domの中の属性を直接修正するのが一番です.
一晩中やったので,比較的はっきりした.細部を追及してこそ、もっと多くのものを得ることができる.自分が欲しいものは手に入らなかったが、多くの収穫を得ることができた.