40

要素に CSS 属性を追加したいのですが、現在のソリューションでは、要素に影響を与えた以前の属性がすべて失われます。

function checkNr(id) {
  var value = document.getElementById(id).value;
  if (parseFloat(value) == NaN) {
    document.getElementById(id).setAttribute("style", "border:2px solid red; background-color: rgb(255, 125, 115);");
  }
  else {
    document.getElementById(id).setAttribute("style", "border:default; background-color: rgb(255, 255, 255);");
  }
}

このメソッドを使用する前に、要素にはすでに次の属性がありました。

float: left;
width: 50px;

その後、要素はこれらの属性を失い、JavaScript メソッドからの特定の属性のみを残します。したがって、属性を置き換えずに追加したいと思います。

4

5 に答える 5

55

そのようなスタイル属性を設定すると、属性が上書きされ、以前に設定されたスタイルが削除されます。

あなたが本当にすべきことは、スタイルプロパティを変更する代わりにスタイルを直接設定することです:

function checkNr(id) {
    var elem  = document.getElementById(id),
        value = elem.value;
    if (parseFloat(value) == NaN) {
        elem.style.border = '2px solid red'; 
        elem.style.backgroundColor = 'rgb(255, 125, 115)';
    } else {
        elem.style.border = 'none'; 
        elem.style.backgroundColor = 'rgb(255, 255, 255)';
    }
}
于 2013-07-25T12:19:33.063 に答える
4 
function checkNr(id) {
    var elem = document.getElementById(id);
    var css = {};
    if (parseFloat(elem.value) == NaN) {
        css = { border: '2px solid red', backgroundColor: 'rgb(255, 125, 115)' };
    } else {
        css = { border: 'none', backgroundColor: 'rgb(255, 255, 255)' };
    }

    Object.assign(elem.style, css);
}
于 2019-07-27T02:50:49.073 に答える
-7

jQuery オプション:

$(this).css('border', 'default');

関数のパラメーターとして配列を渡すこともできます.css()。これは、既存の CSS プロパティを上書きしません。

あなたの場合、これは次のようになります。

document.getElementById(id).css({
   border: '2px solid red;',
   background-color: 'rgb(255, 125, 115)'
});

これを機能させるには、jQuery をプロジェクトに追加する必要があることに注意してください。

jQuery css() 関数へのリンク

于 2013-07-25T12:30:07.167 に答える