How to target CSS link with JavaScript

Question

I only have access to the back end of my CMS. They are loading the custom style sheet this way

<link rel="stylesheet" media="(min-width:481px)" href=".../css/custom/styles.css" type="text/css">

I need to remove the media="(min-width:481px)". Is there a way to do this with JavaScript (I don't think the CMS uses jquery)?

Sure there's a way. Whether it would actually do anything is a different matter. The stylesheet will have been loaded (or not) before JavaScript has a chance to load. It might be a better idea to just load the stylesheet via JavaScript rather than messing with the existing link element. For that, there are many answers on SO, including: stackoverflow.com/q/9979415/215552 — Heretic Monkey
– Heretic Monkey, Commented Sep 27, 2016 at 21:23
So what CMS is it, it would be easier to just solve the issue on the backend. — adeneo
– adeneo, Commented Sep 27, 2016 at 21:24
I've tried contacting the CMS provider who is 100% certain that removing the media="(min-width:481px)" can't be done. — Heather
– Heather, Commented Sep 27, 2016 at 21:29
Pretty much. They also thought me adding !important inside the CSS would let me override the media="(min-width:481px)".... — Heather
– Heather, Commented Sep 27, 2016 at 21:35

Deniz R. · Accepted Answer · 2017-06-19 21:35:15Z

1

I personally do not recommend messing with the elements of a link with JavaScript, but if you still want to do it, this should work:

document.querySelector('link[href=href=".../css/custom/styles.css"]').removeAttribute('media');

If you still want to do this, make sure to wait for css styles to load.

If you want to go with this solution for some reason and do it for all link tags, then this one is simple:

var linkList = document.querySelectorAll('link');

for(var i in linkList) {
linkList[i].removeAttribute('media');
}

Always use .removeAttribute, instead of using setAttribute to set the argument to null. That is generally bad practice.

answered Sep 27, 2016 at 21:39

Deniz R.

606 bronze badges

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

3 Comments

Thank you, this is most likely the correct answer, unfortunately I also just discovered they strip out any custom JS...

You are welcome. If you have access to the server-side language files, you can do it there manually. That would be the best scenario.

Unfortunately its a very poorly designed CMS run by egomaniacs that are 100% convinced their way is the only way.