js怎样动态添加文字样式

js怎样动态添加文字样式,第1张

以改变字体颜色为例

js部分

// 页面加载完毕要执行的 *** 作放到这个函数里

window.onload=function (){

// 使用js实现

document.getElementById('wenzi').style.color="red"

// 使用jqeury实现

$('#wenzi2').css('color','yellow')

}

html部分

<span id="wenzi">js动态添加文字样式示例</span>

<span id="wenzi2">js动态添加文字样式示例2</span>

$("<p/>").appendTo("body").html("这是P标签的内容")

上面的代码的意思是在body尾部追加一个P标签,该P标签的HTML内容是 这是P标签的内容

<style>

.line div {display:inline-block}

</style>

<button id=btn type=button>按钮</button>

<div id=res></div>

<script>

$(function(){

   $("#btn").one("click",function(){

      $("#res").append("<div id=tab></div>")

      var btn1=$("<button type=button>添加</button>")

      btn1.click(addline)

      $("#res").append(btn1)

      var btn2=$("<button type=button>减少</button>")

      btn2.click(delline)

      $("#res").append(btn2)

      addline()

      function addline(){

         var n=$(".line").size()+1

         $("#tab").append("<div class=line><div>事件"+n+"<input type=text value=''/></div> <div>备注"+n+"<input type=text value=''/></div></div>")

      }

      function delline(){

         $("#tab .line:last").remove()

      }

   })

})

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11445503.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存