web-dev-qa-db-ja.com

JavaScriptを使用してCSSを動的に適用する

スタイリングを動的に（つまり、スタイルの値を実行時に作成する）JavaScriptを使用してHTML要素に適用する良い方法は何ですか？

JavaScriptウィジェット（JS、CSS、マークアップ）を単一のコンポーネント（基本的にはオブジェクト）にパッケージ化する方法を探しています。コンポーネントはスタイリングをカプセル化するという考えです（したがって、ユーザーはCSSを直接​​変更し、変更を間接的に適用するより緊密に結合されたアプローチの代わりに、変更するNice APIを持っています）。問題は、1回のAPI呼び出しで複数のスタイリング要素が変更される可能性があることです。

私が行う方法は、CSSを構築し、style属性を適切な要素に設定することです（ほとんどの場合、IDを使用して、マークアップの他の領域への変更の適用を回避します）。これは良い解決策ですか？それを行うより良い方法はありますか？

javascriptcssencapsulationstylingweb-component
12
Juan Carlos Coto

Jqueryを使用

スタイルを含むオブジェクトを渡す既存の要素にスタイルを適用するには、css（）関数を使用します。

var styles = {
  backgroundColor : "#ddd",
  fontWeight: ""
};
$("#myId").css(styles);

一度に1つのスタイルを適用することもできます：

$("#myId").css("border-color", "#FFFFFF");

Vanilla JS：

var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");

Cssで：

また、クラス内で必要なさまざまなスタイルを含む個別のcssファイルを使用することもできます。また、これらのクラスを要素に追加または削除するコンテキストに応じて異なります。

あなたのCSSファイルでは、次のようなクラスを持つことができます

.myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

再度jqueryを使用して、要素にクラスを追加または削除するには、次を使用できます。

$("#myDiv").addClass('myClass');

または

$("#myDiv").removeClass('myClass');

あなたのスタイルをあなたのロジックから分離するので、これはよりきれいな方法だと思います。ただし、cssの値がサーバーから返される値に依存する場合、このソリューションを適用するのは難しいかもしれません。

13
kerwan

私がやる方法は、CSSを構築し、style属性を適切な要素に設定することです。例えば：

var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);

このコードは、スタイルcolor: blue, margin-top:5pxで新しいdiv要素を作成し、ページに追加します。

5
Dean Meehan

Vanilla JSを使用すると、このようなことができます。

CSS class named animateをId circleの要素に追加する場合は、このようにします。

var circle = document.getElementById("circle");
circle.classList.add('animate');

このようにクラスを削除できます。

circle.classList.remove('animate');
2
Rahul kalivaradarajalu

また、より良い方法があるかどうかを尋ねてコンポーネントを構築するので、フロントエンドのJavaScriptフレームワークを使用してそのようなコンポーネントを構築することをお勧めします。 Vuejs、Reactjs

`      
import React, {Component} from 'react'
import styled from 'styled-jss'
const Circle = styled('div')({
  position: 'absolute',
  width: 50,
  height: 50,
  borderRadius: '50%',
  background: (props) => (
    /* Generates a random or based on props color */
  ),
  transform: (props) => (
    /* Generates a random or based on props transform for  positioning */
  )
})
class Demo extends Component {
  componentDidMount() {
    this.tick()
  }
  tick = () => {
    requestAnimationFrame(() => {
      this.setState({/* Some new state */}, this.tick)
    })
  }
  render() {
    return (
      <div>
        {[...Array(amount)].map(() => <Circle />)}
      </div>
    )
  }
}
`
0
Matovu Ronald

私はあなたの質問を誤解しているかもしれませんが、あなたは単純な建築パターンを求めているようです。ウィジェットを使用している人がウィジェットを仕様に合わせて変更しやすくするものが必要ですか？

この場合、CSSを使用せずにこれを行うための特別なパターンは知りません。

私が最も使いやすいと感じた「ウィジェット」には、個別のCSSファイルがあります。それらを自分のニーズに合わせて変更するのはかなり簡単です。これは、HTMLとJavascriptでCSSを使用する構造が、すでにすてきでシンプルなパターンだからだと思います。特に人々がすでにHTML/CSSの関係に精通していることを考えると、もっと良いものがあることは知りません。

0
Chris Dutrow