html事件属性（简略四）

最新推荐文章于 2022-09-20 09:52:03 发布

原创最新推荐文章于 2022-09-20 09:52:03 发布 · 167 阅读

1 ·

CC 4.0 BY-SA版权

本文通过几个具体的实例展示了如何使用JavaScript来操作HTML元素，包括文本复制、改变文本颜色、图片大小调整等功能，有助于理解事件监听及其处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>

<button onclick="copyText()">复制文本</button>

<p>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>

<button ondblclick="copyText()">复制文本</button>

<p>当按钮被双击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}

function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}

function normalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>

<p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>
<p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>

</body>
</html>