js网站动态代码（动态的代码）

今天给各位分享js网站动态代码的知识，其中也会对动态的代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js实现动态改变字体大小代码
• 2、如何使用js动态生成html代码
• 3、如何用js动态写入html代码？

js实现动态改变字体大小代码

在很多大网站上为了提高用户方便阅读文字，都提供有字体大小选择功能，以适应不同年龄段人群的阅读需求，其实这种功能实现起来也很简单，修改起来也方便，字体大号由你来定，默认字体大小可以CSS页面中定义，一般网页的标准字体是9pt，也就是12px；

实例代码一：

!DOCTYPE

html

html

head

title修改字体大小.html/title

meta

http-equiv="keywords"

content="keyword1,keyword2,keyword3"

meta

http-equiv="description"

content="this

is

my

page"

meta

http-equiv="content-type"

content="text/html;

charset=UTF-8"

!--link

rel="stylesheet"

type="text/css"

href="./styles.css"--

style

type="text/css"

div{

border:1px

red

solid;

width:455px;

font-size:16px;

}

.max{

font-size:20px;

}

.moren{

font-size:16px;

}

.min{

font-size:12px;

}

/style

script

type="text/javascript"

//此种方式降低了js和CSS的耦合性

function

changeFontSize(fontStyle){

//

获取节点对象

var

divNode

=

document.getElementsByTagName("div")[0];

//

设置该节点的Name属性以及属性值

divNode.className=fontSize;

}

/*

function

changeFontSize2(fontSize){

//

获取节点对象

var

divNode

=

document.getElementsByTagName("div")[0];

divNode.style.fontSize=fontSize;

}

*/

/script

/head

body

a

href="javascript:void(0)"

onclick="changeFontSize2('20px')"

class="max"大号/a

a

href="javascript:void(0)"

onclick="changeFontSize2('16px')"

class="moren"中号/a

a

href="javascript:void(0)"

onclick="changeFontSize2('12px')"

class="min"小号/a

div

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

/div

/body

/html

实例方法二：

html

head

titleJavaScript设置网页字体/title

style

body{

font-size:9pt;

}

/style

/head

body

div

id=zoom这是一段示例文字，你可以点击下边选择不同字号的字体，这段文字会随即改变大小。脚本之家。/div

SCRIPT

language=JavaScript

function

doZoom(size){

document.getElementById('zoom').style.fontSize=size+'pt'

}

/SCRIPT

P

align=right选择字号：[

A

href="javascript:doZoom(13)"13pt（超大）/A

A

href="javascript:doZoom(10.5)"10.5pt（中型）/A

A

href="javascript:doZoom(9)"9pt（标准）/A

]

/body

/html

如何使用js动态生成html代码

所谓动态生成html代码就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用JavaScript代码来实现。动态生成是一种很常见常用的方法。

用innerHTML写入html代码：

123div id="zd"/div‘即为向id为zd的标签写入内容scriptdocument.getElementById("zd").innerHTML="这里即为要写入的代码"/script

说明：

innerHTML：向对象插入内容。

如何用js动态写入html代码？

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。\x0d\x0a1、用innerHTML写入html代码：\x0d\x0a\x0d\x0adocument.getElementById("abc").innerHTML="要写入的文字或内容"\x0d\x0a2、appendChild() 方法：\x0d\x0aCoffeeTea\x0d\x0a点击向列表添加项目\x0d\x0a\x0d\x0afunction myFunction(){\x0d\x0avar node=document.createElement("LI");\x0d\x0avar textnode=document.createTextNode("Water");\x0d\x0anode.appendChild(textnode);\x0d\x0adocument.getElementById("myList").appendChild(node);\x0d\x0a}\x0d\x0a

回答于 2022-12-14

js网站动态代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于动态的代码、js网站动态代码的信息别忘了在本站进行查找喔。