Guide on Setting Multiple Strings to a CSS Property Using JavaScript

Question

Guide on Setting Multiple Strings to a CSS Property Using JavaScript

Just a heads up, I'm inquiring about multiple strings as opposed to multiple properties.

To be more specific, I am searching for a javascript/jquery method to modify the grid-template-areas property.

This particular property is capable of accepting multiple strings as its value. Take for example:

grid-template-areas: "a b b"
                     "a c d";

javascript jquery css

Answer 1

Answer №1

In order to successfully implement this, it is necessary to enclose the double quotes within the new grid-template-areas value. To achieve this, the new string should be bounded by single quotes. Here is a suggestion:

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

It's important to note that this particular CSS rule will only function in modern browsers (excluding IE and older versions of 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>

Answer 2

In order to successfully implement this, it is necessary to enclose the double quotes within the new grid-template-areas value. To achieve this, the new string should be bounded by single quotes. Here is a suggestion:

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

It's important to note that this particular CSS rule will only function in modern browsers (excluding IE and older versions of 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>

Guide on Setting Multiple Strings to a CSS Property Using JavaScript

Answer №1

Similar questions

Issue: This error occurs when attempting to double click on the diagram or a node but the show function for c is not recognized

Tips for implementing click events on multiple links iteratively

What is the most effective method to store temporary data within a backend panel as a sub-option?

Merging two distinct arrays of objects in JavaScript can be achieved by utilizing various methods and

Improved method for displaying information on a webpage using php and ajax technology

Creating a webpage with a layout that features three full-length columns using

Issue with Angular: event.key doesn't register as shft+tab when pressing Shift+Tab key

Is there a way for me to manage the options that appear in both of my dual <select> elements?

Adding multiple instances of a JPanel class without replacing them

"Troubleshooting when Firefox encounters an error with jQuery load

When would you recommend setting localStorage in an Angular application?

What could be causing the vertical alignment issue of this logo in its parent container?

What is the process for storing a loaded model in three.js?

Using Javascript to display a Div element for a short period of time when the mouse is clicked

What steps do I need to take to create a delete button that will effectively remove a bookmark from an array?

Removing an element from a JSON array

Is transferring information to the factory from the controller feasible?

CSS media query to center the logo on mobile screens

Instructions for including dependencies from a globally installed npm package into a local package

Exploring the fundamentals of JavaScript within the context of Express.JS