JavaScript'te birden çok CSS stilini nasıl ayarlayabilirim?

Aşağıdaki JavaScript değişkenleri var:

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

Onları tekrar tekrar bu şekilde benim öğeme ayarlayabilirsiniz biliyorum:

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

Hepsini aynı anda bir araya getirmek mümkün müdür?

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

Dize olarak CSS değerleriniz varsa ve öğe için önceden ayarlanmış başka bir CSS yoksa (veya üzerine yazmayı önemsemiyorsanız), cssTextözelliği kullanın :

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

Bu, bir özelliği her değiştirdiğinizde öğeyi yeniden boyamaktan kaçındığı için iyidir (bir şekilde "tümünü" bir kerede değiştirirsiniz).

Diğer tarafta, önce dizeyi oluşturmanız gerekir.

Object.assign kullanma :

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

Bu ayrıca CSS stilini yeniden yazmak yerine stilleri birleştirmenizi sağlar.

Ayrıca bir kısayol işlevi de yapabilirsiniz:

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

@Mircea: Bir öğe için çoklu stilleri tek bir ifadede ayarlamak çok kolaydır. Mevcut özellikleri etkilemez ve döngüler veya eklentilere gitmenin karmaşıklığını önler.

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

DİKKATLİ OLUN: Daha sonra stil özelliklerini eklemek veya değiştirmek için bu yöntemi kullanırsanız, 'setAttribute' kullanılarak ayarlanan önceki özellikler silinir.

Onunla ilgilenmek için bir işlev yapın ve parametreleri istediğiniz stillerle iletin.

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

ve böyle söyle

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

propertyObject içindeki özelliklerin değerleri için değişkenleri kullanabilirsiniz ..

Bir JavaScript kitaplığı bunları çok kolay bir şekilde yapmanızı sağlar

jQuery

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

Nesne ve bir döngü için

Veya çok daha zarif bir yöntem temel bir nesne ve döngü için

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

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

Javascript'te birden çok css stili özelliği ayarlama

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

veya

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

Misal:

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

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

Ben sadece burada tökezledi ve bunu başarmak için neden bu kadar kod gerekli olduğunu anlamıyorum.

CSS kodunuzu dize olarak ekleyin.

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

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

a

Css dosyalarınızda tek tek sınıflar olabilir ve ardından öğenize sınıf adını atayabilirsiniz

veya stillerin özellikleri arasında -

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

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

Bunun mümkün olduğunu düşünmeyin.

Ancak stil tanımlarından bir nesne oluşturabilir ve bunlardan sadece geçebilirsiniz.

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

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

Daha da geliştirmek için bir işlev yapın:

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

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

Düz Javascript kullanarak, tüm stilleri aynı anda ayarlayamazsınız; her biri için tek satır kullanmanız gerekir.

Ancak, document.getElementById(...).style.kodu tekrar tekrar tekrarlamanız gerekmez ; referans vermek için bir nesne değişkeni oluşturun ve kodunuzu daha okunaklı hale getirin:

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

...vb. Örneğinizden çok daha kolay okunur (ve açıkçası, jQuery alternatifi kadar kolay okunur).

(Javascript düzgün bir şekilde tasarlanmışsa, withanahtar kelimeyi de kullanabilirsiniz, ancak bazı kötü ad alanı sorunlarına neden olabileceğinden, bu en iyi şekilde bırakılır)

En iyi seçeneğiniz, stilleri kendi başınıza ayarlayan bir işlev oluşturmak olabilir:

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 uyumlu özellik adlarını kullanmaya devam etmeniz gerektiğini unutmayın (bu nedenle backgroundColor)

.. için bakın

Misal:

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

Bu eski iş parçacığı, bu yüzden modern bir cevap arayan herkes için düşündüm, Object.keys () kullanmanızı öneririm;

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

Javascript ile birlikte CSS kullanmanın böyle bir sorunla daha anlamlı olabileceği senaryolar vardır. Aşağıdaki koda bir göz atın:

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

Bu sadece CSS sınıfları arasında geçiş yapar ve geçersiz kılma stilleri ile ilgili birçok sorunu çözer. Hatta kodunuzu daha düzenli hale getirir.

Sağlamadığınız mevcut bildirimlerin üzerine yazmamak için bildirimleri ayrı ayrı ayarlayacak bir işlev yazabilirsiniz. Diyelim ki bu nesne parametre bildirimleri listesine sahipsiniz:

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

Şöyle bir işlev yazabilirsiniz:

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

elementve objectbu nesneye uygulanacak stil bildirimlerinin bir ve özellik listesini alır . İşte bir kullanım örneği:

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

Bence bu, yukarıdaki tüm çözümler açısından çok basit bir yol:

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

Stil nesnesi CSSStyleDeclaration.setProperty()içindeki yöntemi kullanın Object.entries.
Bununla birlikte CSS özelliği için önceliği ("önemli") de ayarlayabiliriz.
"Hipen-case" CSS özellik adlarını kullanacağız.

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>

Aşağıdaki innerHtml geçerli mi

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

ES6 + ile ayrıca ters tırnakları kullanabilir ve hatta css'yi doğrudan bir yerden kopyalayabilirsiniz:

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>

Düğüm prototipine stiller işlevi ekleyebiliriz:

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

Ardından, herhangi bir Düğümde styles yöntemini çağırmanız yeterlidir:

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

Varolan diğer stilleri koruyacak ve object parametresinde bulunan değerlerin üzerine yazacaktır.