Bagaimana saya bisa mengatur beberapa gaya CSS dalam JavaScript?

Saya memiliki variabel JavaScript berikut:

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

Saya tahu bahwa saya dapat mengaturnya ke elemen saya secara berulang seperti ini:

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

Apakah mungkin untuk menyatukan semuanya sekaligus, seperti ini?

document.getElementById("myElement").style = allMyStyle 

Jika Anda memiliki nilai CSS sebagai string dan tidak ada CSS lain yang telah ditetapkan untuk elemen (atau Anda tidak peduli tentang menimpa), manfaatkan cssTextproperti :

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

Ini bagus dalam arti karena menghindari pengecatan ulang elemen setiap kali Anda mengubah properti (entah bagaimana Anda mengubah semuanya "sekaligus").

Di sisi lain, Anda harus membuat string terlebih dahulu.

Menggunakan Object.assign :

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

Ini juga memberi Anda kemampuan untuk menggabungkan gaya, alih-alih menulis ulang gaya CSS.

Anda juga dapat membuat fungsi pintasan:

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

@ Mircea: Sangat mudah untuk mengatur beberapa gaya untuk elemen dalam satu pernyataan. Itu tidak mempengaruhi properti yang ada dan menghindari kompleksitas untuk loop atau plugin.

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

HATI-HATI: Jika nanti Anda menggunakan metode ini untuk menambah atau mengubah properti gaya, properti sebelumnya yang disetel menggunakan 'setAttribute' akan dihapus.

Buat fungsi untuk merawatnya, dan berikan parameter dengan gaya yang ingin Anda ubah ..

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

dan menyebutnya seperti ini

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

untuk nilai properti di dalam propertyObject, Anda dapat menggunakan variabel ..

Pustaka JavaScript memungkinkan Anda melakukan hal-hal ini dengan sangat mudah

jQuery

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

Objek dan for-in-loop

Atau, metode yang jauh lebih elegan adalah objek dasar & untuk-loop

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

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

setel beberapa properti style css di Javascript

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

atau

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

Contoh:

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

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

Saya hanya tersandung di sini dan saya tidak melihat mengapa ada begitu banyak kode yang diperlukan untuk mencapai ini.

Tambahkan kode CSS Anda sebagai string.

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

document.querySelector('*').style = styles

a

Anda dapat memiliki kelas individu dalam file css Anda dan kemudian menetapkan classname ke elemen Anda

atau Anda dapat mengulangi properti gaya sebagai -

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

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

Jangan berpikir itu mungkin.

Tapi Anda bisa membuat objek dari definisi gaya dan hanya mengulanginya.

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

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

Untuk mengembangkan lebih lanjut, buat fungsi untuk itu:

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

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

Menggunakan Javascript biasa, Anda tidak dapat mengatur semua gaya sekaligus; Anda perlu menggunakan satu baris untuk masing-masingnya.

Namun, Anda tidak perlu mengulang document.getElementById(...).style.kode berulang-ulang ; buat variabel objek untuk referensi, dan Anda akan membuat kode Anda lebih mudah dibaca:

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

... dll. Jauh lebih mudah dibaca daripada contoh Anda (dan terus terang, sama mudahnya dengan membaca sebagai alternatif jQuery).

(jika Javascript telah dirancang dengan benar, Anda juga bisa menggunakan withkata kunci, tetapi sebaiknya dibiarkan sendiri, karena dapat menyebabkan beberapa masalah namespace yang buruk)

Taruhan terbaik Anda adalah membuat fungsi yang mengatur gaya Anda sendiri:

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});

Perhatikan bahwa Anda masih harus menggunakan nama properti yang kompatibel dengan javascript (karenanya backgroundColor)

Lihat untuk .. di

Contoh:

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];
}

Ini adalah utas lama, jadi saya mencari orang yang mencari jawaban modern, saya sarankan menggunakan 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);

Ada skenario di mana menggunakan CSS bersama javascript mungkin lebih masuk akal dengan masalah seperti itu. Lihatlah kode berikut:

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

Ini hanya beralih di antara kelas-kelas CSS dan menyelesaikan begitu banyak masalah yang terkait dengan gaya-gaya utama. Itu bahkan membuat kode Anda lebih rapi.

Anda dapat menulis fungsi yang akan mengatur deklarasi satu per satu agar tidak menimpa deklarasi yang ada yang tidak Anda berikan. Katakanlah Anda memiliki daftar parameter objek deklarasi ini:

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'
};

Anda mungkin menulis fungsi yang terlihat seperti ini:

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

yang membutuhkan elementdan objectdaftar properti deklarasi gaya untuk diterapkan ke objek itu. Berikut ini contoh penggunaan:

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'});

Saya pikir ini cara yang sangat sederhana sehubungan dengan semua solusi di atas:

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;
});

Gunakan CSSStyleDeclaration.setProperty()metode di dalam Object.entriesobjek gaya.
Kami juga dapat mengatur prioritas ("penting") untuk properti CSS dengan ini.
Kami akan menggunakan nama properti CSS "hypen-case".

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

<div id="my_div"> Hello </div>

Apakah innerHtml di bawah ini valid

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

Dengan ES6 + Anda juga dapat menggunakan backticks dan bahkan menyalin css langsung dari suatu tempat:

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

Kami dapat menambahkan fungsi gaya ke prototipe Node:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

Kemudian, cukup panggil metode styles pada Node apa pun:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

Ini akan mempertahankan gaya lain yang ada dan menimpa nilai yang ada di parameter objek.