web-dev-qa-db-ja.com

JavaScriptで複数のCSSスタイルを設定するにはどうすればよいですか？

次のJavaScript変数があります。

var fontsize = "12px"
var left= "200px"
var top= "100px"

次のように要素に繰り返し設定できることを知っています。

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

これらを一度にまとめて設定することは可能ですか？

document.getElementById("myElement").style = allMyStyle
javascriptcoding-style
147
Mircea

文字列としてCSS値があり、要素に他のCSSが既に設定されていない場合（または上書きを気にしない場合）、 cssText property を使用します。

document.getElementById("myElement").style.cssText = cssString;

これは、プロパティを変更するたびに要素を再描画することを回避するという意味で優れています（何らかの形で「一度に」すべてを変更します）。

一方、最初に文字列を作成する必要があります。

207
Felix Kling

Object.assign を使用：

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

これにより、CSSスタイルを書き換える代わりに、スタイルをマージすることもできます。

ショートカット機能を作成することもできます：

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}
230
Laimis

@Mircea：1つのステートメントで要素に複数のスタイルを設定するのは非常に簡単です。既存のプロパティに影響を与えず、ループやプラグインの複雑さを回避します。

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

注意：後でこのメソッドを使用してスタイルプロパティを追加または変更すると、「setAttribute」を使用して設定された以前のプロパティは消去されます。

46
SHANK

それを処理する関数を作成し、変更したいスタイルのパラメータを渡します。

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

そしてこのように呼ぶ

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

propertyObject内のプロパティの値には、変数を使用できます。

36
Gabriele Petrioli

JavaScriptライブラリを使用すると、これらのことを非常に簡単に行うことができます

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

オブジェクトとfor-in-loop

または、よりエレガントな方法は、基本オブジェクトとforループです

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}
15
Harmen

javascriptで複数のCSSスタイルプロパティを設定する

document.getElementById("yourElement").style.cssText = cssString;

または

document.getElementById("yourElement").setAttribute("style",cssString);

例：

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
12
eyupgevenim

私はここで偶然見つけましたが、なぜこれを達成するためにそれほど多くのコードが必要なのかわかりません。

CSSコードを文字列として追加します。

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('div').style = styles
<div>a</div>
11
Thielicious

Cssファイルに個別のクラスを作成し、エレメントにクラス名を割り当てることができます

または、スタイルのプロパティを次のようにループできます-

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}
3
Sachin Shanbhag

それが可能だとは思わないでください。

ただし、スタイル定義からオブジェクトを作成し、それらをループすることはできます。

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

さらに開発するには、そのための関数を作成します。

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);
2
nnevala

プレーンなJavaScriptを使用すると、すべてのスタイルを一度に設定することはできません。それぞれに単一の行を使用する必要があります。

ただし、document.getElementById(...).style.コードを何度も繰り返す必要はありません。オブジェクト変数を作成してそれを参照すると、コードがさらに読みやすくなります。

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...等。あなたの例よりもずっと読みやすい（そして率直に言って、jQueryの代替と同じくらい読みやすい）。

（Javascriptが適切に設計されていれば、withキーワードも使用できますが、それはいくつかの厄介な名前空間の問題を引き起こす可能性があるため、そのままにしておくのが最善です）

2
Spudley

for .. in を参照してください

例：

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}
1
Onkelborg

これは古いスレッドですので、現代的な答えを探している人は誰でも考えたので、Object.keys（）を使用することをお勧めします。

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);
1
dragonore

最善の策は、独自にスタイルを設定する関数を作成することです。

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

JavaScript互換のプロパティ名を使用する必要があることに注意してください（そのためbackgroundColor）

1
Ryan Kinal

上記のすべてのソリューションに関して、これは非常に簡単な方法だと思います：

const Elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  Elm.style[prop] = value;
});
0
Jalal

Zam を使用すると、次のようになります

zam.css({'font-size':'12px','left':'200px','top':'100px'}, '#myElement');
0
Roecrew

指定しない既存の宣言を上書きしないように、宣言を個別に設定する関数を作成できます。次の宣言のオブジェクトパラメータリストがあるとします。

const myStyles = {
  'background-color': 'Magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

次のような関数を作成できます。

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

そのオブジェクトに適用するスタイル宣言のelementおよびobjectプロパティリストを受け取ります。以下に使用例を示します。

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply
const myStyles = {
  'background-color': 'Magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});
0
jsejcksn

このような問題に対して、JavaScriptとともにCSSを使用する方が理にかなっているシナリオがあります。次のコードを見てください。

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

これは単にCSSクラスを切り替えて、スタイルのオーバーライドに関連する非常に多くの問題を解決します。それはあなたのコードをよりきれいにします。

0
che-azeh