CODEWITHSUNDEEP
javascriptcssless
user4950651
user4950651

Reputation:

Using JavaScript to change Less files

I want to change a property of a Less file with JavaScript. This is my code

document.getElementsByClassName('content-main--inner').style.border = '1px solid yellow!important';

I've tried it with !important and without it.

But that doesn't work, the property doesn't change. I think the problem is here:

('content-main--inner')

Is it possible to manipulate Less files with JavaScript?

Upvotes: 1

Views: 86

Answers (2)

Seth McClaine
Seth McClaine

Reputation: 10040

Modifying your less file with js wouldn't do you any good because at the time you would modify the file it would have already been translated to css

As someone commented, getElementsByClassName returns a nodeList meaning you need to do the following to modify the first element

document.getElementsByClassName('content-main--inner')[0].style.border = '1px solid yellow !important';

or if you want to modify all elements with the class content-main--inner

var elements =  document.getElementsByClassName('content-main--inner')

for( var i = 0; i < elements.length; i++) {
     elements[i].style.border = '1px solid yellow !important';
}

Upvotes: 0

adeneo
adeneo

Reputation: 318302

getElementsByClassName returns a nodeList, not a single element, you'd have to iterate

var elems = document.getElementsByClassName('content-main--inner');

for (var i=elems.length; i--;) {
    elems[i].style.border = '1px solid yellow';
}

Note that !important can't be set in javascript or inline styles

Upvotes: 1

Related Questions