CODEWITHSUNDEEP
javascriptcss
Tuan Anh Tran
Tuan Anh Tran

Reputation: 139

Add CSS attribute to certain span that contain a CSS style using JavaScript

I have something like this

<span style="font-size: 1.7px; letter-spacing: -1.7px; color: #edf6fc">text</span>

and 

<span style="font-size: 99.81%; color: #080007">text </span>

How would I select the first one and add; let's say display: none to its style (or remove that span) but not the second one using JavaScript.

Or how do I remove all the span that has CSS property letter-spacing?

Upvotes: 0

Views: 1419

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

Give class or id to those elements.

.spanOne{
    display: none;
}

or

create those elements dynamically and store them in variables. Then you can use those variables to add or remove properties.

var spanOne = //code to create span element;
var spanTwo = //code to create another span element;

$(spanOne).hide();

or

$('#parentElementID').children('span').eq(0).hide();

UPDATED:

$('div').children('span').filter(function () {
    return this.style.fontSize == "17.7px";  //in your case 1.7px
}).eq(0).css('backgroundColor', 'red');

PS: I recommend adding a class name or id to that element.

Upvotes: 2

Nitesh
Nitesh

Reputation: 15739

Use an add on like Firebug for example in Firefox, right click on the tag in issue, like here <span> then select inspect element. Go to the code and find out its parent with a unique identifier (ID), select that parent id and add CSS by parent child selection.

For Instance,

#abc span{display: none;}

Add this in your stylesheet. This will make the child of the unique identifier to attach your style and override that one that is applying to it.

Upvotes: 0

THEtheChad
THEtheChad

Reputation: 2432

A simple way would be to add a class name or id:

<span id="iHateYou" style="font-size: 1.7px; letter-spacing: -1.7px; color: #edf6fc">text</span>
<span style="font-size: 99.81%; color: #080007">text </span>

and the js:

document.getElementById('iHateYou').remove();

Upvotes: 0

Related Questions