CODEWITHSUNDEEP
javascripthtmlcss
user3719670
user3719670

Reputation: 5

Customization of css attributes

I'm trying to customize the color attribute of this element this way:

<h2 style="float:left;font-family:'Open Sans',sans-serif;color:#fbfbfb;font-size:40px;position:relative;margin-top:-458px;margin-left:90px;" class="main-title">TEST</h2>

js code (included in the top of the html page)

(function(){
    document.getElementsByClassName('main-title').color = 'black';
})();

Doing this wouldn't change the color. Including it at the bottom of the page involves the same issue. Also, I've tried to include a css file which contains(.main-title{color:black;}) instead of that js file, but it still the same. How to fix this, please?

Any brilliant idea ?

Upvotes: 0

Views: 33

Answers (2)

Mritunjay
Mritunjay

Reputation: 25892

There should be

document.getElementsByClassName('main-title')[0].style.color = 'black';

Because getElementsByClassName returns a collection not a single element. And color is a key in style property.

You have Top-margin = -458px so that element will never appear. So may be you are not able to view that element itself.

Upvotes: 1

jasonscript
jasonscript

Reputation: 6178

You need to update the style property of the element

document.getElementsByClassName('main-title')[0].style.color = 'black';

You can also update all the elements with this classname with the following

var els = document.getElementsByClassName('main-title');
for (var i = 0; i < els.length; i++){
    els[0].style.color = 'black'
}

Upvotes: 0

Related Questions