如何用js改变中的文字

JavaScript014

如何用js改变中的文字,第1张

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

    div{

        width: 240px

        height: 80px

        margin: 20px

        padding: 20px

        border: 1px solid #d5d5d5

    }

  </style>

  <script type="text/javascript">

    function changeFont(){

        setFont({

            id:"test1",

            color:"#ff0000",

            size: "12px", 

            family:"微软雅黑"

        })

        setFont({

            id:"test2",

            color:"#00ff00",

            size: "12px", 

            family:"楷体",

            weight: "normal"

        })

        setFont({

            id:"test3",

            color:"#0066ff",

            size: "12px", 

            family:"隶书"

        })

    }

    function setFont(settings){

        if(settings && settings.id){

            var obj = document.getElementById(settings.id)

            obj.style.color= settings.color || '#ffff00'

            obj.style.fontSize = settings.size || '36px'

            obj.style.fontFamily = settings.family || 'Courier New'

            obj.style.fontWeight = settings.weight || 'bolder'

            //或者

            //document.getElementById("test1").style.font="italic bold 12px arial,serif"

        }        

    }

</script>

 </head>

 <body>

  <div id="test1">这是一个测试1</div>

  <div id="test2">这是一个测试2</div>

  <div id="test3">这是一个测试3</div>

  <button onclick="changeFont()">Change</button>

 </body>

</html>

1.首先,打开hbuilder软件,在空白文件中写入两个button,并将id属性设置为btn1和btn2,在下面添加脚本标签以获取dom。 button1的元素,并为其button标签赋予click事件,当单击button1时,文本将更改。

2.然后,按crtl + s保存,可以在浏览器中看到两个按钮。

3.接着,在右侧浏览器中单击button1的按钮,button1的文本内容将更改。

4. jQuery首先需要将jQuery导入下面的文件,然后使用jQuery的“ $”选择器获取button2的dom,并为其设置click事件,然后可以更改按钮的内容。

5.最后,保存后,在浏览器中单击button2,还可以观察到文本内容已更改。操作完成。