<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操作内容，样式，属性的更多相关文章

  1. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

  2. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  3. jQuery-操作元素的内容，属性，样式

    1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...

  4. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

  5. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  6. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  7. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. PHP Jquery 代码操作 内容 属性 样式 事件 Json数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

随机推荐

  1. 服务注册发现consul之三：服务发现比较:Consul vs Zookeeper vs Etcd vs Eureka

    这里就平时经常用到的服务发现的产品进行下特性的对比,首先看下结论: Feature Consul zookeeper etcd euerka 服务健康检查 服务状态,内存,硬盘等 (弱)长连接,kee ...

  2. linux 查看进程启动路径

    在linux下查看进程大家都会想到用 ps -ef|grep XXX 可是看到的不是全路径,怎么看全路径呢? 每个进程启动之后在 /proc下面有一个于pid对应的路径 例如:ps -ef|grep ...

  3. 微信7.0以上版本fiddler、Charles抓包报HTTPS证书信任问题通报

    通报:微信更新到7.0以后抓包公众号会有证书问题,抓包小程序直接不能打开 各位不用到处找了,也不用怀疑人生了,你没有问题.win10也没有问题.fiddler和Charles也没有问题,是因为微信更新 ...

  4. sys.modules[__name__]的一个实例

    关于sys.modules[__name__]的用法,百度上阅读量比较多得一个帖子是:https://www.cnblogs.com/robinunix/p/8523601.html 对于里面提到的基 ...

  5. [UE4]HitResult中各项数值的含义

    对于“LineTraceByChannel”来说: Blocking Hit:是否击中了物体 Initial Overlap: Time: Distance: Location(击中的位置)等于Imp ...

  6. 跨域验证cookie与缓存控制

    1. 是否能跨域完全取决于浏览器控制,浏览器可以直接拒绝发送跨域请求(服务器根本收不到),也可以发送给服务器等接收到返回信息后决定是否让它被读取. 2. 服务器并不能辨别请求是从哪个源发过来的,只有在 ...

  7. 2018北美部分CS项目学费

    yearly cost from official website USC 城里 24credit about 49k + cost of room&food BU 城里 NEU 65k 城里 ...

  8. Android7.0对dlopen的改变——读取私有.so结果变化

    两个内存段 在同一个进程空间中dlopen一个.so文件,理论上在内存中是同一片区域,但实际调试中发现Android7.0(read "/proc/self/maps")中,先后读 ...

  9. CSS便捷开发小工具汇总

    1.Prefix free 可以帮助开发者省去编写各种CSS3属性前缀的工作,只需要在页面中引入prefixfree.js即可. 2. Normalize 是一个CSS Reset工具, 相比传统的R ...

  10. ant编译时提示一大堆软件包不存在的问题

    ant编译时提示一大堆软件包不存在的问题  解决方案: 把项目的 lib 里的jar包 放的 jdk的jre的ext的目录下 例如 java home 是 D:JavaEEJavajdk1.8.0_1 ...