优秀的编程知识分享平台

网站首页 > 技术文章 正文

学习js/css时易忽略的小知识点（css会阻塞js解析吗）

nanyue 2024-10-04 18:20:12 技术文章 13 ℃

表单中使用name来获取表单的value

方法是使用document.getElementsByName()来获取，但是一定要记得这样获取到的结果为集合。如果代码写成这样将不会起作用

var x = document.getElementsByName("x").value;
window.alert(x);

你会发现alert出来的是undefinded

因为获取的结果为集合，所以应该加上下标，如下：

var x = document.getElementsByName("x")[0].value;
windwo.alert(x);

这时，alert出来的才是正确的值。


用js来获取textarea中用户输入的值

同上面的一样。起初以为是用.innerHTML来获取，后发现也是用value获取。

代码1：

效果1：


关于在匿名函数中使用innerHTML遇到的问题

在写练习的时候遇到一个问题，在网页中动态的显示当前的时间。用了setInterval()，然后把显示时间的代码写成匿名函数放在setInterval()的第一个参数里面了，可是网页一直报错，显示不了时间。

<html>
<head>
	<title>始终制作</title>
	<script type="text/javascript">
		window.onload = window.setInterval((function() {
			var nTime = new Date();
			var year = nTime.getFullYear();
			//alert(year);
			var month = nTime.getMonth()+1;
			var day = nTime.getDate();
			var hours = nTime.getHours();
			var minutes = nTime.getMinutes();
			var seconds = nTime.getSeconds();
			var week = nTime.getDay();
			var amOrpm = "";
			var weekday="";
			if(hours > 12 && hours <24) {
				amOrpm = "PM";
			}else if(hours >= 0 && hours <= 12){
				amOrpm = "AM";
			}
			switch(week) {
				case 1:
					weekday = "星期一";
					break;
				case 2:
					weekday = "星期二";
					break;
				case 3:
					weekday = "星期三";
					break;
				case 4:
					weekday = "星期四";
					break;
				case 5:
					weekday = "星期五";
					break;
				case 6:
					weekday = "星期六";
					break;
				case 7:
					weekday = "星期天";
					break;
			}
			var reallyt =  year + "年" + month + "月" + day + "日" + " " + hours 
      	+ ":" + minutes + ":" + seconds + " " + amOrpm + " " + weekday;
		    //document.write(reallyt);
		    document.getElementById("nowTime").innerHTML="<h2>" 
          + reallyt + "</h2>";
		})(),1000);
	</script>
</head>
<body>
	<h1>欢迎来到炒鸡无敌大餐厅，现在的时间是：</h1>
	<div id="nowTime"> </div>
</body>
</html>

网页报错如下：

后面把匿名函数放出来声明好，再在setInterval()里面调用，又可以用了，很郁闷（补充：或者把innerHTML换成innerText试试？不行。。。）。在网上搜到说是好像因为匿名函数是一行一行执行的，在执行到innerHTML那里时，因为网页中的id为nowTime的div还没加载，所以找不到就报错了。不知道这个解释正不正确。

改正后代码：

结果：

貌似还有一个方法是：把js脚本放在body后面引入？ 在我这份代码中不行。。。


关于index

通过getElement系列函数获取的元素集合有一个index属性。例如

var temp = document.getElementByName("x");
temp[0].index=i;

这段代码表示，第一个元素的下标等于i。


在a标签中使用onclick等事件

在a标签中使用onclick等事件时，为了防止此事件失效，需要把a标签的href属性的属性值设置为：javascript:void(0);


使用getElementXXXX系列函数

使用getElementXXXX系列函数时，如果要获取标签的各种属性，在html中标签的属性名怎么写，js中的属性名就怎么写。只有一个意外，如果要获取标签的class属性，则在js中要通过clsaaName来获取

var d = getElementById("div11");
d.className = "div22"; 
//通过className来获取类名<div id = "div11" class = "div1">    kadl</div>


z-index使用

在网页中，要想使z-index出现效果，元素必须设置定位，不管是绝对定位还是相对定位都可以，根据情况


css中的透明度

使用opacity(x)实现，x的取值为0-1之间的小数。

Tags：

猜你喜欢

最近发表
标签列表