《HTML 5+CSS 3入门经典》——2.4 上机实践

    xiaoxiao2021-04-16  224

    2.4 上机实践

    2.4.1 使用hidden属性对用户评论内容进行隐藏

    题目描述当我们在浏览新闻的时候,通常会发现新闻的下面有一个用户评论区域,在用户的评论区域,浏览者可以针对新闻的内容发表自己的看法,这样页面中就会存在很多用户评论的内容,这些评论内容使得页面看起来比较拥挤。这个时候我们就可以使用hidden属性来对评论的内容进行隐藏操作,效果如图2.3所示。技术指导首先,在页面中放置一对元素,在该元素内放置用户的评论内容,并设置该元素的id为“art”;同时在页面中放置两个单选按钮,并设置其中一个单选按钮的checked属性为“true”,即显示,另外一个单选按钮不设置checked属性,即为隐藏。然后使用JavaScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也即时显示出来。其实现的主要代码如下所示。

    2.4.2 使用spellcheck属性检查单词的拼写情况题目描述在本例中使用spellcheck属性对输入的英文语句进行检查,当所输入的英文语句中出现错误的单词时,会使用红线将错误的单词圈出,以便读者快速查找出错误的单词,运行效果如图2.4所示。技术指导将spellcheck属性设置成true,以此完成单词拼写的检查。其实现的主要代码如下所示。2.4.3 对页面输出的文字进行编辑题目描述对页面中输出的内容进行编辑,运行结果如图2.5所示。技术指导将article元素加上contentEditable属性后,该元素内的文字就变成可编辑的了,编辑完成后单击“保存”按钮,这时将把元素的innerHTML发送到服务器端进行保存。其实现的主要代码如下所示。

    相关资源:HTML上机练习

    最新回复(0)