Fatal编程技术网
  • javascript/
  • Javascript 如何在单击时更改头部的样式？

Javascript 如何在单击时更改头部的样式？

javascript css

Javascript 如何在单击时更改头部的样式？,javascript,css,onclick,styles,internals,Javascript,Css,Onclick,Styles,Internals,单击我想更改“样式”标题中的内部样式表。（我不想以内联样式更改它！！）我成功地将新的divone css添加为文本，但无法删除旧的（element.classList.remove（“#divone”）；）。是否有一个空闲者。移除。。。，或任何其他方式来实现这一点。有什么想法或建议吗？ 多谢各位 <!DOCTYPE html> <html> <head> <style id="style"> #divone{ width: 500px; heigh

单击我想更改“样式”标题中的内部样式表。（我不想以内联样式更改它！！）我成功地将新的divone css添加为文本，但无法删除旧的（element.classList.remove（“#divone”）；）。是否有一个空闲者。移除。。。，或任何其他方式来实现这一点。有什么想法或建议吗？ 多谢各位

<!DOCTYPE html>
<html>
<head>
<style id="style">
#divone{
width: 500px;
height: 50px;
background-color: red;
}
#divtwo{
width: 400px;
height: 80px;
background-color: purple;
}
</style>
</head>
您尝试删除类，但使用id

按下面的方法做。将id符号
#
更改为类符号
并将DOM id更改为类名：

函数myFunctionTest（）{
var元素=document.getElementById（“样式”）；
element.classList.remove（“divone”）；
document.getElementById（“style”）.textContent+=“.divone{宽度：400px；高度：35px；背景色：蓝色；}”；
}

.迪翁{
宽度：500px；
高度：50px；
背景色：红色；
}
你好

点击我
你只需点击一下按钮就可以得到CSS。试试下面的代码


函数myFunction（）{
document.getElementById（'button'）.style.cssText='背景色：绿色；颜色：白色；字体大小：44px'；
}

.迪翁{
宽度：500px；
高度：50px；
背景色：红色；
}
你好

单击我
告诉我更多帮助我需要id为…，正如我在问题中提到的，是否有类似element.idList.remove（“divone”）的内容；在您的示例中，样式“divone”只是重复，因此我有两个“divone”样式。旧的#divone应被删除并替换为新的#divone，但另一个#divtwo…，将不会被删除。这意味着向同一样式标记添加新样式属性，旧样式属性将被覆盖。为什么要删除到旧样式？我不想删除整个样式，只想用另一个#divone替换它，因为样式包含其他样式，如#divtwo….，很多…没有jquery，我想问你是否可以将其转换为javascript？我需要更改head内部样式，而不是内联样式 
<div id="divone"></div>
<div id="divtwo"></div>
<button onclick="myFunctionTest()">Click me</button>

function myFunctionTest() {
    var element = document.getElementById("style");
    element.classList.remove("#divone");
    document.getElementById("style").textContent += "#divone{width: 400px; height: 35px; background-color: red;}";
}

  function myFunctionTest() {
    document.getElementById("style").remove();
    var css = '#divone{width: 400px; height: 35px; background-color: red;}',
    head = document.head || document.getElementsById('head')[0],
    style = document.createElement('style');

   head.appendChild(style);

   style.type = 'text/css';
   if (style.styleSheet){
  // This is required for IE8 and below.
   style.styleSheet.cssText = css;
   } else {
      style.appendChild(document.createTextNode(css));
     }


  }