jQuery の属性とスタイル (6)

JavaScript を通じて dom 要素の style 属性を取得すると、要素に style 属性を動的に割り当てることができます。 jQuery では、style 属性を動的に変更したい場合は、css() メソッドを使用するだけです。

css() メソッド: 要素の style 属性の計算値を取得するか、要素の CSS 属性を設定します。

Get:

css( propertyName ): 一致する要素のセット内の最初の要素の style 属性の計算値を取得します

css( propertyNames ): 配列を渡し、オブジェクトの結果を返します

設定:

css (propertyName, value ): CSS を設定します

css( propertyName, function ): コールバック関数を渡し、処理のために対応する値を返すことができます

css(property ): オブジェクトを渡し、複数のスタイルを設定できます同時に

注:

ブラウザのプロパティの取得方法は異なります。たとえば、色は RBG を使用し、サイズは px

css() メソッドを使用します。書き込みと大文字小文字混合書き込みが行われ、内部フォールトトレランス処理が行われます

数値が値としてのみ使用される場合、jQuery はそれを文字列に変換し、.css("width のように文字列の末尾に px を追加します) ",50}) と .css("width ","50px"})

コードの一部を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>

    <script>
        $('div').css('color','red');
    </script>
</body>
</html>

div 内のコンテンツのスタイルを変更します

何を見てみましょう例えば、divタグのHighやbackgroundの幅を設定したいのですが、どう書けばよいでしょうか？

それから、次のようなコードを書き始めましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>
    
    <script>
        $("div").css({
            width:'200px',
            height:'200px',
            background:'#ccc'
        });
    </script>
</body>
</html>

上記のコードを見ると、ｄｓｖの背景の幅と高さを希望のスタイルに設定できます

注: 書くときは、属性を最後に記述する場合は、カンマを追加することはできません

。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>

提出するリセットコード

自動運転