web-dev-qa-db-ja.com

jQuery attr（）を使用して「css」を設定します

OjReillyの2011年の「jQuery Pocket Reference」という本を読んでいます。15ページで、

'たとえば、attr（ "css"、{backgroundColor： "gray"}）を呼び出すことは、css（{backgroundColor： "gray"}）を呼び出すことと同じです。

しかし、attr（“ css”、{}）を機能させることはできません。私のテストコード： http://jsfiddle.net/4UMN3/4/

$(function() {
$("#btnChangeColor").click(function () {
$("#spanText").attr("css", { backgroundColor: "gray" });

 });

});

Css（）メソッドは正常に動作します http://jsfiddle.net/4UMN3/5/

jquerycssattr
10
user3026964

交換：

$("#spanText").attr("css", { backgroundColor: "gray" });

と

$("#spanText").attr('style',  'background-color:gray');
13
Branimir Đurek

おそらく、それは

$("#spanText").attr('style', 'background-color:gray');

これは機能する可能性がありますが、いくつかの問題があります。

  • style属性ではなく、styleプロパティを変更することをお勧めします。
  • 以前に設定されたすべてのインラインスタイルを置き換えます。

次に、jQueryを使用する場合は、cssメソッドを使用することをお勧めします。

$("#spanText").css('background-color', 'gray');

ただし、styleプロパティはVanilla-jsでは便利です。

document.getElementById("spanText").style.backgroundColor = 'gray';
4
Oriol

JQueryの.attr（）は、要素が持つ属性にのみ影響を与えると思います。 HTMLElementsは、「css」（<div css="something"></div>）。

したがって、正しい使用法は

$("#spanText").attr("style",{backgroundColor:"gray"});

しかし、この出力

<span id="spanText" style="[object Object]">This is a test</span>

実際に機能する例は

$("#spanText").attr("style","background-color:gray;");
2
SVSchmidt
$("#id").attr('style',  'color:red;cursor:pointer');
1
Kanomdook

jQueryを使用するため、attrではなくcssを使用する必要があります。「causecssaddプロパティただし、attrはすべてのスタイルを置き換えます存在する場合！

0
karim somai
<style>
    .newClass{
    color:#fff;
    }
    .test2{
    color:red;
    }
    .newclass{
    color:blue;
    }
</style>

<script>
$(document).ready(function(){

    //get style and class name in alert
      $('#attr').click(function () {
        alert($('h3').attr("style"));
        alert($('h3').attr("class"));
      });

     //set css property
     $("#setcss").click(function(){
        $("#test").css({"background-color": "#000", "color": "teal"});
      });

      //change class name property
      $('#changeclassname').click(function(){
        $('#test3').removeClass('test2').addClass('newclass');
      });
});


</script>


<!--get style and class name in alert-->
<h3 class="test" style="color: white; background: red;">This is the tag and this will be our tag</h3> 

<button id="attr">get Attribute</button>


<!--set css property-->
<p id="test" class="test1">This is some <b>bold</b> text in a paragraph.</p>

<button id="setcss">set Attribute</button>


<!--change class name property-->
<p id="test3" class="test2">This is some text in a paragraph.</p>

<button id="changeclassname">set Attribute</button>
0
jignasha

=> .cssメソッドは、「css」ではなくスタイル属性を変更します。

$().att('style' , 'backgroundColor : gray');

=> htmlにはcss属性のようなものはありません

0
user117291