[JS]使用JS修改标签属性和CSS样式表

/ 1评论 / 262阅读 / 1点赞

HTML标签的样式


JS方法

这里我们都以开头的div为例子(<div id="cooldiv" class="cdiv"><div>)

修改内联样式:

<script>
/*通过id定位*/
function temp_byId(){
    var mydiv = document.getElementById("cooldiv");
    mydiv.setAttribute("height", "20px");
}

/*通过类名定位*/
function temp_byClassName(){
    var mydivList = document.getElementsByClassName("cdiv");
    for(var i = mydivList.length; i--;){
        mydivList[i].setAttribute("height", "20px");
    }
}
</script>
<script>
function temp(){
    var mydiv = document.getElementById("cooldiv");

    mydiv.style.height = "20px";
    mydiv.style.backgroundColor="#66ccff";
    mydiv.style.color = "#66ccff";
}
</script>

修改样式表:

<script>
function temp(){
    var mydiv = document.getElementById("cooldiv");
    mydiv.style.cssText = " color:#66ccff; height:20px; ";
    /*累加cssText,如果直接等于,则上一句设置的color height会被删掉*/
    mydiv.style.cssText += "; width:20px; ";
}
</script>
/*创建一个<style>标签*/
var mystyle = document.createElement('style');

/*写入<style>内的CSS样式表*/
mystyle.innerHTML =
'.cdiv {' +
'   color: blue;' +
'   background-color: #66ccff;' +
'   height: 20px;' +
'}';

// 获取第一个<script>标签
var ref = document.querySelector('script');
// 在第一个<script>标签前插入<style>标签
ref.parentNode.insertBefore(mystyle, ref);
<style>
/*定义一个新样式类newDiv,写入想要的样式*/
.newDiv {
    color:#66ccff;
    height: 20px;
}
</style>

<script>
/*把新样式类newDiv加到标签上*/
function temp(){
    var mydiv = document.getElementById("cooldiv");
    mydiv.classList.add("newDiv");
}
</script>

  1. Mark说道:

    Thanks for your blog, nice to read. Do not stop.

发表回复

您的电子邮箱地址不会被公开。