当前位置：网站首页>JS-DOM元素对象

JS-DOM元素对象

2022-08-11 02:31:00 【（-^_^-）】

获取文本和HTML内容的DOM属性

innerHTML--------节点内的文本或者HTML标签------------嵌入HTML之中（要求只能文本禁止标签)

innerText——节点内的文本没有HTML标签——仅支持IE浏览器

textContent——节点内的文本没有HTML标签——除支持IE浏览器其他

value——表单控件中的文本——input

使用DOM调整样式（color backgroundColor border 等 和CSS有大小写区别）

用JS代码设置字体加粗和样式：

 

用JS代码设置字体 （使用一个函数 不同的字体的设置关键点是this）

 JS代码设置字体大小

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网页</title>
	<script src="js/e.js" type="text/javascript"></script>
</head>
<body>
<!-- 联系的函数 -->
<div id="1">
	<p>Lorem ipsum dolor sit.</p>
	<p>Lorem ipsum dolor sit.</p>
	<p>Lorem ipsum dolor sit.</p>
	<p>Lorem ipsum dolor sit.</p>
	<p>Lorem ipsum dolor sit.</p>
	<p>Lorem ipsum dolor sit.</p>
</div>
<div id="2">
	Font:&nbsp;&nbsp;&nbsp;
	<input type="radio" id="serif" name="1"><!-- name相同为了只能选一个而不是复选 -->
	Serif
	&nbsp;&nbsp;
	<input type="radio" id="fantasy" name="1">Fantasy
	&nbsp;&nbsp;
	<input type="radio" id="monosapce" name="1">Monosapce
	<br>
	Style:&nbsp;&nbsp;&nbsp;
	<input type="checkbox" id="bold"><!-- checked表示默认选中 -->
	Bold加粗
	&nbsp;&nbsp;
	<input type="checkbox" id="italic">Ttalic倾斜
</div>

</body>
</html>
function bold(){
	var a=document.getElementById('1');//添加的位置
	if(this.checked){
		a.style.fontWeight="bold";
	}else{
		a.style.fontWeight="normal";
	}
	
}
function italic(){
	var a=document.getElementById('1');//添加的位置
	if(this.checked){
		a.style.fontStyle="italic";
	}else{
		a.style.fontStyle="normal";
	}
}
function fontset(){
	var a=document.getElementById('1');//添加的位置
	
	a.style.fontFamily=this.id; //当前窗口

	//字体大小增加2pt 原来的字体大小 与12二选其一 实现12的设置及
	var oldSize =parseInt(a.style.fontSize) ||12;
	a.style.fontSize=(oldSize+2)+"pt";//转换成字符 每次选中会实现字体的扩大
}


window.onload=function(){

		document.getElementById('bold').onclick=bold;//上面连成一句
		document.getElementById('italic').onclick=italic;

		document.getElementById('serif').onclick=fontset;
		document.getElementById('fantasy').onclick=fontset;
		document.getElementById('monosapce').onclick=fontset;
		
}

原网站

版权声明
本文为[（-^_^-）]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_47295886/article/details/126242193

边栏推荐

猜你喜欢

随机推荐