1.27 自动隐藏或显示网页中的文字
实例说明
在HTML 5 中，绝大部分的元素都支持“hidden”属性，该属性只有如下两个取值。
- true：当“hidden”的取值为“true”时，元素不在页面中显示，但还存在于页面中。
- false：当“hidden”的取值为“false”时，则显示于页面中。该属性的默认值为“false”，即元素创建时便显示出来。
在本实例中，使用< nav >元素设置两个相互排斥的单选按钮，一个用于显示< article >元素，另一个用于隐藏< article >元素。然后编写相应的JavaScript代码实现隐藏功能。
具体实现
使用Dreamweaver创建一个名为“027.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hidden属性的使用</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
function Rdo_Click(v){
var blnShow=(v)?false:true;
var strArt=document.getElementById("art");
strArt.setAttribute("hidden",blnShow);
}
</script>
</head>
<body>
<h5>元素的隐藏属性</h5>
<nav style="padding-top:5px;padding-bottom:5px">
<input type="radio" id="rdoHidden_1" onClick="Rdo_Click(1)"
name="rdoHidden" value="1" checked="true"/>显示
<input type="radio" id="rdoHidden_2" onClick="Rdo_Click(0)"
name="rdoHidden" value="0"/>隐藏
</nav>
<article id="art" class="p3_8">
大家好，我是雨夜，欧耶。
</article>
</body>
</html>
在上述JavaScript代码中，自定义了一个Rdo_Click()函数，用于在单击单选按钮时调用。在该函数中，先获取单击单选按钮时传回的变量“v”值，然后将“v”值转成“hidden”属性对应的布尔值“true”或“false”；最后通过setAttribute()方法，将该值设置到< article >元素的“hidden”属性中，从而实现隐藏的效果。执行后的初始效果如图1-46所示，选择“隐藏”按钮后文字将隐藏，如图1-47所示。
https://yqfile.alicdn.com/49e517b53ed07b620a0f06ce818ed88f22006a3a.png" >
时间： 2024-09-17 14:19:25