javascript - 如何使用 JavaScript 将多个字符串设置为一个 css 属性？

Question

<分区>

Answer 1

要完成这项工作，您需要在新的 grid-template-areas 值中包含双引号。因此，您需要用单引号分隔新字符串。试试这个:

$('#example-element').css('grid-template-areas', '"a b b" "a b b" "a c c"');

请注意，此 CSS 规则仅适用于现代浏览器(即除 IE 和旧版 Edge 之外的所有浏览器，<= 15)

$('button').click(function() {
  $('#example-element').css('grid-template-areas', '"a b b" "a b b" "a c c"');
});

#example-element {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
  grid-template-areas: "a a a" "b c c" "b c c";
}

#example-element :nth-child(1) {
  background-color: rgba(0, 0, 255, .2);
  border: 3px solid #00f;
  grid-area: a;
}

#example-element :nth-child(2) {
  background-color: rgba(255, 0, 200, .2);
  border: 3px solid #663399;
  grid-area: b;
}

#example-element :nth-child(3) {
  background-color: rgba(94, 255, 0, .2);
  border: 3px solid green;
  grid-area: c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example-container">
  <div id="example-element" class="transition-all">
    <div>One (a)</div>
    <div>Two (b)</div>
    <div>Three (c)</div>
  </div>
</div>

<button>Change layout</button>