-1

Example:

<style>
.className {
  left: 0;
  color: blue;
}
</style>

I want to remove the left: 0; aspect using javascript/jquery or whatever method I have to use to do this. I don't have the option of opening the document to edit or delete. Any Ideas? Note that this class has other styles within it and I just want to remove the left:0; aspect ONLY leaving the rest intact.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Vick
  • 43
  • 8
  • 3
    Possible duplicate of [Change the style of an entire CSS class using javascript](https://stackoverflow.com/questions/9153718/change-the-style-of-an-entire-css-class-using-javascript) – Derek Pollard Jul 23 '18 at 18:06
  • 1
    Possible duplicate of [How to remove Left property when position: absolute?](https://stackoverflow.com/questions/10245729/how-to-remove-left-property-when-position-absolute) – Nerdi.org Jul 23 '18 at 18:07
  • 2
    Why don't you add a css rule with higher specificity and set `left:auto` or `inherit`? – Roddy of the Frozen Peas Jul 23 '18 at 18:10

6 Answers6

4

An element's style attribute can override its CSS class properties. left: auto will also reset the left property of an element to the default value.

An element's style can be set like this in Javascript:

Element.style.[CSS property] = [value]


<span id="someId">Span</span>
<script>
document.getElementById("someId").style.color = "#aeb";
</script>

Its jQuery equivalent is (for one CSS property):

$([selector]).css([CSS property], [value]);


$('#someId').css("color", "#aeb");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="someId">Span</span>

For many CSS properties:

$([selector]).css({[CSS property]: [value], [CSS property]: [value]});


$('#someId').css({"color":"red", "font-size":"1.5em", "position":"absolute", "top": "25%", "left": "25%"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="someId">Span</span>

<style>
.className {
  left: 0;
  position: absolute;
}
</style>
<span class="className">Span.className</span><br/>
<span class="className">Span.className</span><br/>
<span class="className">Span.className</span><br/>
<span class="className">Span.className</span><br/>
<span class="className">Span.className</span><br/>
<span style="left: 0; position: absolute;">Span with left:0 and position:absolute</span>
<script>
var elems = document.getElementsByClassName("className");
for(let i = 0; i < elems.length; i++){
  elems[i].style.left = "50px";
}
</script>

To overwrite all previous set CSS properties of an element, you can use all: initial, setting all CSS properties to its initial value.

<style>
.someClass{
  position: fixed;
  color: red;
  background-color: dodgerblue;
  font-size: 3em;
  margin: 20px;
}
</style>
<span class="someClass">Span.someClass</span>
<span class="someClass" style="all: initial;">Span.someClass all:initial</span>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
2
left:auto;

Auto will reset the left attribute to the browser's default for the page :)

possible / similar duplicate:

How to remove Left property when position: absolute?

Nerdi.org
  • 895
  • 6
  • 13
2

Using jquery you should be able to simply do this:

$('.className').css({'left': 'auto'});

Or, if the class isn't really all that important anyways, you could just remove it like this:

$('.className').removeClass('className');

You could override it with another value either in CSS, or using the same jQuery thing mentioned in the first part of my answer.

Ethan Brouwer
  • 975
  • 9
  • 32
  • left 'auto' will reset it to the browser default, which is what the other elements will be using unless 'left' is specifically set. By removing left, you mess it up, so you have to set to auto so that it doesn't get misaligned - at least in my experience. – Nerdi.org Jul 23 '18 at 18:08
  • Thanks for that. I changed the answer. – Ethan Brouwer Jul 23 '18 at 18:08
  • Yes it is. He said, "I want to remove the left: 0; aspect using JavaScript/jQuery" – Ethan Brouwer Jul 23 '18 at 18:16
1

Here are two different approaches.

1. Replace/Remove the class

If that is the only style attribute in that class, you could remove the class from all elements that use it.

Example with jQuery:

$(".className").removeClass("className").addClass("anotherClass");

2. Override the attribute

The default value for left in CSS is auto, so you could override the CSS for all of those elements.

Example with jQuery:

$(".className").css("left", "auto");
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • @Derek "I want to remove the left: 0; aspect using javascript/**jquery** or whatever method I have to use to do this. I don't have the option of opening the document to edit or delete. Any Ideas?" – Liftoff Jul 23 '18 at 18:16
  • Thing is, its not the only style attribute within that class. And the other style attributes within that class can't be deleted. Thats why I just want to remove that style attribute specifically. – Vick Jul 23 '18 at 18:43
0

Try like this:

$('.className').remove();
Apple Orange
  • 646
  • 5
  • 12
  • 27
  • 1
    If I'm understanding this correctly, this would just remove any element that has that class. I don't think that's what the OP wants. – Ethan Brouwer Jul 23 '18 at 18:17
  • I don't want to remove the class itself, just the style within that class inside the style tag. – Vick Jul 23 '18 at 18:31
  • $('.className').css('left','none'); – Apple Orange Jul 23 '18 at 18:37
  • [A code-only answer is not high quality](//meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers). While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please [edit] your answer to include explanation and link to relevant documentation. – Stephen Ostermiller Jan 26 '22 at 21:14
0

Since it has a value, making the value blank will make it so it doesn't count as any value and the css attribute will be skipped/ignored. Solution:

$('.className').css('left',' ');

If the attribute still gets read as 0 then you will have to apply the !important to the .css(); to override it.

Vick
  • 43
  • 8