JSdom操作内容，样式，属性
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p> <script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script> <p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<h1>我的第一段JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('hello world!')">点击这里</button>
</body>
</html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body><h1>我的第二段 JavaScript</h1>
<p id="demo">JavaScript能改变html的内容</p>
<script>
function myFunction()
{x=document.getElementById("demo");//找到元素 x.innerHTML="hello javascript";//改变内容
}
//document.getElementById("demo").innerHTML="hello javascript";
; </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body> <script>
function changeimage()
{element=document.getElementById("myimage")
if(element.src.match("W020140820293362535623"))//匹配
{
element.src="素材/fad4e632d27affc7d69ccf49bf08cf79.jpg";
} else
{
element.src="素材/W020140820293362535623.jpg";
}
}
</script>
<img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">
<p>点击图片更改图片</p>
<p>javascript能改变任意html元素的大多数属性，而不仅仅是图片</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<h1>我的第三段 JavaScript</h1> <script>
function myFunction()
{x=document.getElementById("demo") // 找到元素
if(x.style.color="#0C3")
{x.style.color="#03C";
}
else
{
x.style.color="#0C3";} // 改变样式
}
</script>
<p id="demo" onclick="myFunction()" style="color:#0C3">
JavaScript 能改变 HTML 元素的样式。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p>怎么不行呢？</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">
<script type="text/javascript" src="myjavascript/改变图片.js"></script>
<p>调用外部JavaScript</p>
<p><b>提示：</b>外部脚本不能包含 <script> 标签。</p>
<p><b>注释：</b>changeimage保存在名为 "改变图片.js" 的外部文件中。</p>
</body>
</html>
JSdom操作内容，样式，属性的更多相关文章
- Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
- css内容样式属性
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
- jQuery-操作元素的内容，属性，样式
1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- PHP Jquery 代码操作 内容 属性 样式 事件 Json数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）
document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...
随机推荐
- 跨域问题及jQuery中Ajax传参的讲解
1.跨域:不再同一服务器下,就是协议,域名,端口,有一个不一样: 浏览器对于javascript的同源策略的限制: 案例: 以 http://172.164.23:8088/ 为例 相同域名:172. ...
- RPM安装MYSQL5.7
RPM安装MYSQL5.7 1:YUM安装依赖库 yum install perl libaio numactl 2:下载安装需要的RPM包 https://dev.mysql.com/get/Dow ...
- Python写的链接数据库存取数据
Python写的链接数据库存取数据 #!/usr/bin/python # -*- coding: UTF-8 -*- from __future__ import print_function im ...
- C语言强化——指针
目录 相关概念 数组与函数 栈空间和堆空间的差异 指针常量与常量指针 指针数组与数组指针 二级指针 二级指针的传递 二级指针的偏移(索引式排序) 相关概念 指针的大小,在32系统上是4个字节:在64位 ...
- 搭建好lamp，部署owncloud。
先上传两个文件 上传到root目录 上传到opt目录下 #mkdir /opt/dvd1 #mount /dev/sr0 /opt/dvd1 #cd /etc/yum.repos.d/ #vi dvd ...
- mysql 删除表 外键出错
MySQL库中有俩表,table1和table2,相互关联,在删除表的时候出错: Cannot delete or update a parent row: a foreign key constra ...
- 第11章 拾遗3：虚拟局域网(VLAN)
1. 虚拟局域网(VLAN) (1)VLAN是建立在物理网络基础上的一种逻辑子网,它将把一个LAN划分成多个逻辑的局域网(VLAN),每个VLAN是一个广播域,VLAN内的主机间通信就和在一个LAN内 ...
- java synchronized 同步详解
记下来,很重要. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchron ...
- Android Studio设置自定义字体
Android Studio设置自定义字体 (1)进入设置页面,File->Settings (2)自定义字体Editor->Colors&Fonts->Font (3)点击 ...
- mysql 取整数或小数或精确位数
select cast(3.1415926 as decimal(9,2))精确到几位 select round(1024.5); 四舍五入 select floor(1024.5);取整数部分 se ...