web开发设计--JS的innerHTML/display属性

1.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")          ;

  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello Michael!"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

显示效果:

Hello Michael!

JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。

原标题:javascript

修改后的标题:Hello Michael!

2.

显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script language="javascript">
        function hidetext()
		{
		var mychar = document.getElementById("con").style.display="none";

		}
		function showtext()
		{
		var mychar = document.getElementById("con").style.display="block";

		}
    </script>
</head>
<body>
    <h1>JavaScript</h1>
    <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" />
       <input type="button" onclick="showtext()" value="显示内容" />
    </form>
</body>
</html> 

3.

控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码,获得 <p> 元素的 class 属性和改变className:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>

web开发设计--JS的innerHTML/display属性

时间: 2024-10-12 15:25:27

web开发设计--JS的innerHTML/display属性的相关文章

web开发设计--js数据类型,js运算符

1. js数据类型分为:数值型,布尔型,字符串 通过typeof可以看具体的数据类型是什么. 举例: <span style="font-family:Microsoft YaHei;font-size:18px;"><html> <head> </head> <body> <script language="javascript"> //js中变量的定义(在js中,变量用var表示,不管实际类

web 界面设计---js提交表单

Java代码   <script type="text/javascript"> function checkImage(){ var imageValue = document.getElementById("actorCard:imageField:image").value; if(imageValue !== ""){ document.getElementById("actorCard").sumbit(

Web开发——HTML基础(HTML事件属性)

1.全局事件属性 HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. 如需学习更多有关事件编程的知识,请访问我们的 JavaScript 教程. 下面列出了添加到 HTML 元素以定义事件动作的全局事件属性. ?= HTML5 中新的事件属性. 2.Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbeforeprin

web开发实例教程:使用placeholder属性进行提示

客户端完成加载页面时,将光标定位到表单的第一个表单域上能够提高用户输入数据的速度.许多搜索引擎通过JavaScript实现了这个功能,而现在,HTML提供了自动聚焦功能,并将其视为语言的一部分. 要使用HTML的自动聚焦功能,你只需在任意表单域中添加autofocus属性即可. 浏览器会把用户光标定位到最后一个设置了autofocus属性的表单域上. 回退 仅需少量JavaScript代码即可检测出是否存在autofocus属性,如果用户浏览器不支持 autofocus属性,则可使用jQuerv

【Java Web开发学习】Spring构造器和属性注入

测试类 public class Construct { private String address; private long phone; public Construct(String name, int age) { System.out.println("> " + name + ", " + age); } public String getAddress() { return address; } public void setAddress(

Google Web开发最佳实践(一)

这篇文章最初是在阿里通信前端团队的github博客(http://aliqin.github.io)上看到的,原文地址https://developers.google.com/web/fundamentals/(要翻墙).既然要去阿里了,就得先熟悉熟悉环境,既然是最佳实践,就得自己亲自实践一下. 1.创建网站的内容和结构 内容是任何网站最重要的部分.所以让我们为内容而设计,而不要让设计支配内容.在这个手册中,我们首先确定我们需要的内容,基于这个内容创建一个页面结构,然后在简单的线性布局里呈现页

Webpack: 为Web开发而生的模块管理器[转]

Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Sep 2014 对于开发人员而言,好的包管理器可以让工作事半功倍.现在流行的编程语言大多有自己的包管理系统.近年来,Web开发越来越火,其开发工具也随之越来越好用了,而Webpack就是一款专为Web开发设计的包管理器.它能够很好地管理.打包Web开发中所用到的HTML.Javascript.CSS以

快速使用node.js进行web开发

首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这是一个比较好的学习模式和过程.由于这本书是2012年出的,书中的一个web教学项目是开发一个微博.从2012到现在,node.js及其生态环境发生了很大改变,所以关于该书的学习如果照着书本显然是过于陈旧的.到目前为止,node.js的web开发框架已经升级到了Express4.12.1,对于Mong

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布