Jak ustawić wiele stylów CSS w JavaScript?

Mam następujące zmienne JavaScript:

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

Wiem, że mogę ustawić je dla mojego elementu iteracyjnie w następujący sposób:

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

Czy można je wszystkie połączyć naraz, coś takiego?

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

Jeśli masz wartości CSS jako ciąg znaków i nie ma już innego CSS ustawionego dla elementu (lub nie przejmujesz się nadpisywaniem), skorzystaj z cssTextwłaściwości :

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

Jest to w pewnym sensie dobre, ponieważ pozwala uniknąć odmalowania elementu za każdym razem, gdy zmieniasz właściwość (zmieniasz je wszystkie „naraz”).

Z drugiej strony musisz najpierw zbudować ciąg.

Za pomocą Object.assign :

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

Daje to również możliwość łączenia stylów zamiast przepisywania stylu CSS.

Możesz także wykonać funkcję skrótu:

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

@Mircea: Bardzo łatwo jest ustawić wiele stylów dla elementu w pojedynczej instrukcji. Nie wpływa to na istniejące właściwości i pozwala uniknąć złożoności korzystania z pętli lub wtyczek.

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

UWAŻAJ: Jeśli później użyjesz tej metody do dodania lub zmiany właściwości stylu, poprzednie właściwości ustawione za pomocą „setAttribute” zostaną usunięte.

Zrób funkcję, aby się tym zająć i przekaż parametry wraz ze stylami, które chcesz zmienić.

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

i nazwij to tak

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

dla wartości właściwości wewnątrz właściwościObiekt można użyć zmiennych.

Biblioteka JavaScript pozwala robić te rzeczy bardzo łatwo

jQuery

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

Obiekt i pętla for-in

Lub, o wiele bardziej elegancka metoda, to podstawowy obiekt i pętla for

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

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

ustaw wiele właściwości stylu css w JavaScript

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

lub

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

Przykład:

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

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

Właśnie się tu natknąłem i nie rozumiem, dlaczego do osiągnięcia tego jest tak dużo kodu.

Dodaj swój kod CSS jako ciąg.

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

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

a

Możesz mieć indywidualne klasy w swoich plikach css, a następnie przypisać nazwę klasy do swojego elementu

lub możesz przeglądać właściwości stylów jako -

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

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

Nie sądzę, że jest to możliwe jako takie.

Ale możesz utworzyć obiekt na podstawie definicji stylu i po prostu przejść przez nie.

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

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

Aby dalej się rozwijać, utwórz dla niego funkcję:

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

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

Używając zwykłego Javascript, nie można ustawić wszystkich stylów jednocześnie; musisz użyć pojedynczych linii dla każdej z nich.

Nie musisz jednak powtarzać document.getElementById(...).style.kodu w kółko; utwórz zmienną obiektową, aby się do niej odwoływała, a sprawisz, że kod będzie znacznie bardziej czytelny:

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

...itp. Znacznie łatwiejszy do odczytania niż twój przykład (i szczerze mówiąc, równie łatwy do odczytania jak alternatywa jQuery).

(jeśli JavaScript został poprawnie zaprojektowany, mógłbyś również użyć withsłowa kluczowego, ale najlepiej zostawić to w spokoju, ponieważ może to powodować pewne nieprzyjemne problemy z przestrzenią nazw)

Najlepszym rozwiązaniem może być utworzenie funkcji, która sama określa style:

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

Pamiętaj, że nadal będziesz musiał używać nazw właściwości zgodnych z javascript (stąd backgroundColor)

Zobacz dla ... w

Przykład:

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

To jest stary wątek, więc pomyślałem, że dla każdego, kto szuka nowoczesnej odpowiedzi, sugeruję użycie 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);

Istnieją scenariusze, w których użycie CSS wraz z javascript może mieć większy sens w przypadku takiego problemu. Spójrz na następujący kod:

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

To po prostu przełącza się między klasami CSS i rozwiązuje tak wiele problemów związanych z nadpisywaniem stylów. Sprawia nawet, że Twój kod jest bardziej uporządkowany.

Możesz napisać funkcję, która będzie ustawiać deklaracje indywidualnie, aby nie zastępować żadnych istniejących deklaracji, których nie dostarczasz. Załóżmy, że masz tę listę parametrów obiektu deklaracji:

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

Możesz napisać funkcję, która wygląda następująco:

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

która pobiera elementi objectlistę właściwości deklaracji stylu do zastosowania do tego obiektu. Oto przykład użycia:

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

Myślę, że jest to bardzo prosty sposób w odniesieniu do wszystkich powyższych rozwiązań:

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

Użyj CSSStyleDeclaration.setProperty()metody w Object.entriesobiekcie stylów.
Dzięki temu możemy również ustawić priorytet („ważny”) dla właściwości CSS.
Użyjemy nazw właściwości 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>

Czy podany poniżej parametr innerHtml jest prawidłowy

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

Dzięki ES6 + możesz także używać backticków, a nawet kopiować css bezpośrednio skądś:

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>

Możemy dodać funkcję stylów do prototypu węzła:

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

Następnie po prostu wywołaj metodę stylów na dowolnym węźle:

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

Zachowa wszelkie istniejące style i nadpisze wartości obecne w parametrze obiektu.