如何在JavaScript中设置多种CSS样式?

2020/10/17 18:01 · javascript ·  · 0评论

我有以下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 

如果您将CSS值作为字符串,并且尚未为该元素设置其他CSS(或者您不关心覆盖),请使用cssText属性

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

从某种意义上说,这是很好的,因为它避免了每次更改属性时都重新绘制元素(以某种方式“一次”更改所有元素)。

另一方面,您将必须首先构建字符串。

使用Object.assign

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

这也使您能够合并样式,而不是重写CSS样式。

您还可以创建快捷方式功能:

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

@Mircea:在单个语句中为一个元素设置多种样式非常容易。它不会影响现有属性,并且避免了进行循环或插件的复杂性。

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

注意:如果以后使用此方法添加或更改样式属性,则使用'setAttribute'设置的先前属性将被删除。

使一个函数来处理它,并以您想要更改的样式传递参数。

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内的属性值,可以使用变量。

JavaScript库可让您轻松完成这些操作

jQuery的

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

对象和循环中

或者,更优雅的方法是基本对象和for循环

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

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

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

我只是在这里偶然发现,而我不明白为什么要实现这一目标需要大量代码。

将您的CSS代码添加为字符串。

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

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

您可以在CSS文件中包含单个类,然后将类名分配给您的元素

或者您可以通过以下方式遍历样式的属性:

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

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

别以为这样是不可能的。

但是您可以根据样式定义创建对象,然后循环遍历它们。

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

使用纯Javascript,您无法一次设置所有样式;您需要为每条使用单行。

但是,您不必一遍document.getElementById(...).style.又一遍地重复代码。创建一个对象变量以引用它,您将使代码更具可读性:

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

...等等。比您的示例更容易阅读(坦率地说,与jQuery替代一样容易阅读)。

(如果对Javascript进行了适当的设计,则也可以使用该with关键字,但是最好不要使用它,因为它可能会导致一些令人讨厌的名称空间问题)

对我来说,最简单的方法就是只使用字符串/模板:

elementName.style.cssText = `
                                width:80%;
                                margin: 2vh auto;
                                background-color: rgba(5,5,5,0.9);
                                box-shadow: 15px 15px 200px black; `;

绝佳的选择,因为您可以使用多个线串,使生活变得轻松。

在此处查看字符串/模板垃圾:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

最好的选择是创建一个可以自行设置样式的函数:

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

在中查看..

例:

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

这是旧线程,所以我想找一个寻找现代答案的人,建议使用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);

在某些情况下,将CSS与javascript一起使用可能会更解决此类问题。看下面的代码:

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

只需在CSS类之间切换即可解决与覆盖样式相关的许多问题。它甚至使您的代码更整洁。

您可以编写一个函数,该函数将分别设置声明,以便不覆盖您没有提供的任何现有声明。假设您有此对象参数的声明列表:

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

其中包含elementobject样式声明属性列表以应用于该对象。这是一个用法示例:

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

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

对于以上所有解决方案,我认为这是一种非常简单的方法:

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

CSSStyleDeclaration.setProperty()Object.entriesstyles对象内部使用方法


我们还可以使用此属性为CSS属性设置优先级(“重要”)。


我们将使用“大写字母” CSS属性名称。

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>

下面的innerHtml是否有效

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 +,您还可以使用反引号,甚至可以直接从某处复制CSS:

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)

请考虑使用CSS添加样式类,然后通过JavaScript classList和简单的add()函数添加此类

style.css

.nice-style { 
fontsize : 12px; 
left: 200px;
top: 100px;
}

脚本JavaScript

const addStyle = document.getElementById("myElement");
addStyle.classList.add('nice-style');

由于字符串支持添加,因此您可以轻松添加新样式而不会覆盖当前样式:

document.getElementById("myElement").cssText += `
   font-size: 12px;
   left: 200px;
   top: 100px;
`;
<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>

我们可以向Node原型添加样式功能:

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

然后,只需在任何节点上调用styles方法即可:

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

它将保留任何其他现有样式,并覆盖object参数中存在的值。

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongshezhiduozhongcssyangshi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!