《HTML5 开发实例大全》——1.27 自动隐藏或显示网页中的文字

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.27节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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 

 input type="radio" id="rdoHidden_1" 

 name="rdoHidden" value="1" checked="true"/ 显示

 input type="radio" id="rdoHidden_2" name="rdoHidden" value="0"/ 隐藏

 /nav 

 article id="art" 

 大家好，我是雨夜，欧耶。

 /article 

 /body 

 /html 

在上述JavaScript代码中，自定义了一个Rdo_Click()函数，用于在单击单选按钮时调用。在该函数中，先获取单击单选按钮时传回的变量“v”值，然后将“v”值转成“hidden”属性对应的布尔值“true”或“false”；最后通过setAttribute()方法，将该值设置到 article 元素的“hidden”属性中，从而实现隐藏的效果。执行后的初始效果如图1-46所示，选择“隐藏”按钮后文字将隐藏，如图1-47所示。

https://yqfile.alicdn.com/49e517b53ed07b620a0f06ce818ed88f22006a3a.png"

Android项目实战（十四）：TextView显示html样式的文字 原文:Android项目实战（十四）：TextView显示html样式的文字 项目需求： TextView显示一段文字，格式为：白雪公主（姓名，字数不确定）向您发来了2（消息个数，不确定）条消息 这段文字中名字和数字的长度是不确定的，还要求名字和数字各自有各自的颜色。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。