测试match()方法、改变样式、换行符

来源：互联网发布：完美红颜进阶数据编辑：程序博客网时间：2024/05/24 20:06

下面的代码中程序比较乱，因为测试了比较多的内容。从一个菜鸟开始。现在做下总结：

（1）测试了document.write方法的使用，会将整个html的内容覆盖。里面可以直接写标签及内容。

（2）测试了match方法的返回值是什么样子的。如果里面包含值，则返回包含的值。

（3）测试了放在if参数中除了null和0 系统会认为是false，其他的都认为是true。

（4）测试了在html标签里面定义样式和在js里面定义样式，是不同的。找出统一规律，在html标签中直接定义样式，放在style里面，格式是属性：值，都不需要加单引号。属性与属性之间用分号分割。（和easyui里面的data-options不同，那个里面是用逗号分割。）属性基本上都是小写。中间可能带破折号分割。如果在js里动态定义其样式属性，名称会有所变化，会去掉破折号，并且把破折号后第一个字母大写。例如backgroud-color 会变为 backgroudColor。

（5）测试换行。html换行标签是<br/> js书写代码的过程中字符串中加反斜杠\，可以对当前字符串换行，只是看代码的时候好看下，让系统能够识别。但是对页面没有任何影响。

（6）测试input button 和button标签，两者的效果是一样的，以后可以直接用button标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script type="text/javascript">
document.write("<p>这是一个测试程序</p>");
document.write("<h1>这个是个测试测试测试程序</h1>");
//测试match函数
function testmatch(){
//测试结果 innerHTML 后面的HTML为大写才能识别，
//测试结果 match函数会将匹配值返回，如果能找到的话，找不到则返回null
var aa = document.getElementById('wz').innerHTML;
if(aa.match("nihao")){
alert(aa.match("nihao"));
alert('true');
}else{
alert(aa.match('nihao1'));
}
//测试结果 0和null 认为是false 其他认为是true
if(2){
alert('xxx');
}
}
//改变样式
function changeys(){
var obj = document.getElementById('wz');
//obj.style.color='red';
//在js里设置style里的属性名称不带破折号，如果直接在标签里面写style="font-wight:bold",但是如果用js动态给样式赋值，则属性名会变换，破折号去掉，破折号后的第一个字母大写
obj.style.fontWeight='bold';
obj.style.bgColor="green";
obj.style.backgroundColor="red";
obj.innerHTML='nihaozhenqiguaizhenqiguainihao';
//js里可以使用反斜杠\对文字进行换行，只是为了换行还能识别为字符串，并不是在运行起来后换行。document.write 是直接对整个页面进行写，会覆盖掉原先所有的操作。
document.write("你好\
世界");
document.appendChild('<div>11111</div>');
}
</script>
</head>

<body>

<button type="button" onclick="alert('nihao')">点我测试</button>
<input type="button" onclick="testmatch()" value="测试match" />
<button type="button" onclick="changeys()">改变样式</button>

<div id="wz" style="background-color:#00CC33" style="font-weight:bold;font-size:20px">nihaozhenqiguai<br/>zhenqiguainihao</div>
</body>
</html>

0 0