Удалить css link из DOM и добавить новый

239

04 ноября 2017, 16:16

Привет.

Есть link, задача по нажатию кнопки на сайте перебрать все линки и удалить нужные а именно skin.css и screen.css и добавить новый weak.css

Как лучше это реализовать без помощи jquery?

<link rel="stylesheet" type="text/css" href="/assets/8862bcbe/css/jquery.mmodal.css" /> 
<link rel="stylesheet" type="text/css" href="/assets/a16b7e4/css/jquery.mnotify.default.css" /> 
<link rel="stylesheet" type="text/css" href="/assets/b4b7bb4a/jquery.mnotifyajax.css" /> 
<link rel="stylesheet" type="text/css" href="/assets/22da6ae4/mtooltip.css" /> 
<link rel="stylesheet" type="text/css" href="/assets/8e70d089/css/screen.css" media="" /> 
<link rel="stylesheet" type="text/css" href="/assets/8e70d089/css/skin.css" media="" />

Answer 1

<link rel="stylesheet" type="text/css" href="/assets/8e70d089/css/screen.css" media="" id="screen_css_link"/>
<link rel="stylesheet" type="text/css" href="/assets/8e70d089/css/skin.css" media="" id="skin_css_link/>
<link rel="stylesheet" type="text/css" href="/assets/8e70d089/css/weak.css" media="" disabled id="weak_css_link/>
<script>
    var button = document.getElementById('change_styles_button');
    button.onclick = function() {
        var screen_css_link = document.getElementById('screen_css_link');
        screen_css_link.disabled = True;
        var skin_css_link = document.getElementById('skin_css_link');
        skin_css_link.disabled = True;
        var weak_css_link = document.getElementById('weak_css_link');
        weak_css_link.disabled = False;
        alert('Styles changed to weak.css');
    }
</script>
<button id="change_styles_button">Плохо видите? Нажмите эту кнопку и всё волшебным образом преобразится.</button>

Answer 2

console.log = function(vl) {//более удобны вывод списка link 
  var elem = document.querySelector("#console"); 
  for (var i = 0, len = vl.length; i < len; i++) { 
      elem.innerHTML += vl[i].getAttribute("href")+"<br>"; 
  } 
  elem.innerHTML+="==========<br>"; 
}; 
 
console.log(document.querySelectorAll("link"));//проверяем, какие css подключены на данный момент(это не часть кода! просто для наглядности) 
 
btn.addEventListener("mousedown", function() {//добавляем слушателя на кнопку 
  var el = document.querySelector('[href="css/css1.css"]'); 
  if(el){//проверка на случай отсутствия нужного линка 
  var created=document.createElement('link');//создаём новый link(для удобства можно уместить в отдельную функцию) 
  created.rel="stylesheet"; 
  created.type="text/css"; 
  created.href="css/cssHZ.css"; 
  el.parentNode.appendChild(created); 
   
  el.parentNode.removeChild(el);//удаляем наш link(который в переменной el) 
} 
  console.log(document.querySelectorAll("link"));//опять выводим список css 
});

<head> 
  <link rel="stylesheet" type="text/css" href="css/css1.css"> 
  <link rel="stylesheet" type="text/css" href="css/css2.css"> 
  <link rel="stylesheet" type="text/css" href="css/css3.css"> 
  <link rel="stylesheet" type="text/css" href="css/css4.css"> 
  <link rel="stylesheet" type="text/css" href="css/css5.css"> 
</head> 
 
<body> 
  <button id="btn"> нажми на меня</button> 
  <div id="console"></div> 
</body>