Accessing CSS styling with JavaScript when checkbox is checked

Question

For a class assignment I need to position an image of a square, either left, right or center depending on which corresponding radio button I click.

I wish to keep as much styling out of JavaScript as I can. However this is proving a problem as I am unable to access what I want. Example:

This is one of the radio buttons:

<input type="radio" id="center" name="position" onclick=moveShape() value="center">center

The shape itself:

<span id="square">
</span>

its JavaScript:

function moveShape() {
    var center = document.getElementById("center");
    var shape = document.getElementById("square");
    if(center.checked){
        // access CSS here

    }

and then I want to access styling, such as:

        #somenewid {
        width: 10px;
        height: 10px;
        background-color: red;
        display: inline-block;
       // code to center it

    }

I have tried setting a new id. Such as shape.id = "cent"; which works once, but if I then click another radio button and come back to the center button, it tells me the ID is null.

I do not, and cannot, be given the answer to the assignment but I do need to know how to set my HTML/JavaScript elements such that I am able to access CSS styling.

You can get styles applied to an element by doing something like: window.getComputedStyle(element) in your case that would be window.getComputedStyle(shape) more information on mdn — Varinder
– Varinder, Commented Feb 16, 2018 at 2:11
would that enable me to assign different styles to the 3 elements; left, right and center? — JavaNovice
– JavaNovice, Commented Feb 16, 2018 at 2:13
assigning different styles can be done by adding a style attribute to the element shape.setAttribute("style", "left: 10px; top: 20px"); — Varinder
– Varinder, Commented Feb 16, 2018 at 2:14
@Varinder I think it's better to manipulate the style property directly: shape.style.left = '10px'; — mpen
– mpen, Commented Feb 16, 2018 at 2:16
@Varinder I guess I was just weary of doing it that way because I've had bad experiences in the past trying to get properties like "checked" via getAttribute but upon further research it seems the only downside of setting the style this way is that it'll overwrite any inline styles you set in the HTML. It should perhaps be noted though that you can still set multiple styles via Object.assign(shape.style, {left:'10px',top:'20px'}) but I guess it doesn't matter how you do it. — mpen
– mpen, Commented Feb 16, 2018 at 2:23

mpen · Accepted Answer · 2018-02-16 19:50:21Z

2

Not sure what you want to "center" the shape relative to, but this should get you started:

function moveShape(cb) {

  let square = document.getElementById('square');
  if (cb.checked) {
    square.className = "center";
  } else {
    square.className = "right";
  }
}

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  position: absolute;
}

.center {
  left: 50%;
  margin-left: -5px;
}

.right {
  right: 0;
  margin: auto;
}

.container {
  position: relative;
  border: 1px solid black;
  height: 10px;
}

<label>
<input type="checkbox" onChange="moveShape(this)"> center
</label>

<div class="container">
  <span id="square" class="right"></span>
</div>

edited Feb 16, 2018 at 19:50

answered Feb 16, 2018 at 2:36

mpen

285k289 gold badges896 silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaiido Over a year ago

I think you misread the question. OP "wish to keep as much styling out of JavaScript as [they] can".

mpen Over a year ago

@Kaiido Good point. Updated my answer. Yours is still better though.

mpen Over a year ago

Just noticed he used "checkbox" in the question title but a "radio" in his HTML. Oh well. Now we have examples of both ;)

Kaiido · Accepted Answer · 2018-02-16 03:41:32Z

What you tried to reinvent is the class attribute/selector.

You can add/remove this attribute as you wish, and add multiple of these, allowing you to assign different style rules more dynamically.

In the following example, I'll use the container text-align property to set the shape's alignment, so I'll add the class to this container element.

// we will add the event listeners to all the input elements
document.querySelectorAll('input').forEach(function(inp) {
  inp.addEventListener('change', moveShape);
});

function moveShape(evt) {
  var container = document.getElementById("container");
  var pos = this.value;
  // first we remove the previous classes
  container.classList.remove('left', 'center', 'right');
  // then we add the new one
  container.classList.add(pos);
}

#container {
  width: 200px;
  height: 40px;
  border: 1px solid;
}

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  margin: 15px auto;
}

#container.center {
  text-align: center;
}

#container.left {
  text-align: left;
}

#container.right {
  text-align: right;
}

<input type="radio" id="left" name="position" value="left" name="shape-pos" checked><label for="left">left</label>
<input type="radio" id="center" name="position" value="center" name="shape-pos"><label for="center">center</label>
<input type="radio" id="right" name="position" value="right" name="shape-pos"><label for="right">right</label>

<div id="container">
  <span id="square">
</span>
</div>

But all this could be done without js, thanks to the input:checked pseudo-class:

#container {
  width: 200px;
  height: 40px;
  border: 1px solid;
}

#square {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  margin: 15px auto;
}

#left:checked ~ #container {
  text-align: left;
}

#center:checked ~ #container {
  text-align: center;
}

#right:checked ~ #container {
  text-align: right;
}

<input type="radio" id="left" name="position" value="left" name="shape-pos" checked><label for="left">left</label>
<input type="radio" id="center" name="position" value="center" name="shape-pos"><label for="center">center</label>
<input type="radio" id="right" name="position" value="right" name="shape-pos"><label for="right">right</label>

<div id="container">
  <span id="square">
</span>
</div>

Collectives™ on Stack Overflow

Accessing CSS styling with JavaScript when checkbox is checked

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related