您的位置：首页 > Web前端 > JavaScript

用JS改变HTML图像和样式

2017-01-20 19:34 369 查看

开始在function函数里面忘记在element加分号，然后路径设置上本文件夹也不能多加/符号，但是可以用./表示当前目录，../表示上级目录。

然后就是注意括号，id。

match()方法，字符串匹配，在第一个改变图像中，就是检索到这个字符串就返回true，否则false，详细用法：http://www.w3school.com.cn/jsref/jsref_match.asp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS2</title>
<script>
// <!-- <script type="text/javascript">
// document.write("<h1>This is a heading</h1>");
// document.write("<p>This is a paragraph</p>"); -->

// <img id = "img" onclick = "changeimage" src="eg_bulboff.gif" >

function changeimage()
{
element = document.getElementById("img");
if (element.src.match("bulbon"))
{
element.src = "./eg_bulboff.gif";
}
else
{
element.src = "./eg_bulbon.gif";
}

}

function changecolor()
{
x = document.getElementById("demo");
x.style.color = "#ff0000";
}
</script>
</head>
<body>
<p>
<button type = "button" onclick = "alert('Welcome!')">点击</button>
<img id = "img" onclick = "changeimage()" src="eg_bulboff.gif">
</p>

<br>
<button type="button2" name="button" onclick="changecolor()">点击改变颜色</button>

<p id = "demo">JavaSript能改变HTML元素的样式</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航