jQueryとJavaScriptでスタイルの取得・設定・削除について比較しています。
インラインスタイル以外のCSSの取得は「getComputedStyle」を指定し取得する必要があります。
スタイルの取得
let val=$('#id').css('color');
console.log(val); //rgb(255, 0, 0)
//複数のスタイルを取得
let vals=$('#id').val(
['color','width']
);
console.log(vals);
// {color: "rgb(255, 0, 0)", width: "150px"}let elem = document.querySelector('#id');
let style = window.getComputedStyle(elem);
let val = style.getPropertyValue('color');
console.log(val); //rgb(255, 0, 0)
//インラインスタイルを取得する場合以下でも可能
console.log(elem.style.color); //red
//複数のインラインスタイルを取得
console.log(elem.style.cssText);
//color: red; width: 150px;スタイルの設定
$('#id').css('color','red');
//複数設定する場合
$('#id').css({
'color':'red', 'width':'150px'
});let elem=document.querySelector('#id');
elem.style.color='red';
//複数設定する場合
elem.style.cssText='color:red;width:150px';スタイルの削除
$('#id').css('color','');
//複数削除する場合
$('#id').css({'color':'','width':''});let elem=document.querySelector('#id');
elem.style.color=null;
//一括削除する場合
elem.style.cssText=null;
