2.4 上机实践

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

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

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

相关文章:

  • 2021-12-14
  • 2021-10-26
  • 2022-02-10
  • 2021-12-12
  • 2021-09-04
  • 2021-07-01
  • 2021-05-10
  • 2021-05-04
猜你喜欢
  • 2021-10-01
  • 2022-01-21
  • 2022-01-13
  • 2021-07-25
  • 2021-07-21
  • 2021-11-15
  • 2021-12-02
相关资源
相似解决方案