Javascript-dom总结(修改样式)

→→→→

于 2013-08-13 14:48:14 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript/JQuery

本文链接：https://blog.youkuaiyun.com/zou_yufei/article/details/9947229

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的搜索框焦点变化效果，当搜索框获得焦点时清除默认提示并改变文字颜色，失去焦点时若为空则恢复默认提示及颜色。

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

1. 改变控件的样式表

document.getElementById("f").className = "style2";

2.改变控件的单一样式

document.getElementById("change").style.background = "black";

应用:搜索文本框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        //获得焦点
        function t() {
            //获得当前搜索框内的内容
            var txt = search.value;
            //如果是初始化的内容  则清空 并设置字体黑色
            if (txt == "请输入关键字……") {
                search.value = "";
                search.style.color = "Black";
            }
        }

        //失去焦点
        function t1() {
            //获得当前搜索框内的内容
            var txt = search.value;
            //如果用户没有输入内容  则恢复默认值 并设置灰色 
            if (txt == "") {
                search.value = "请输入关键字……";
                search.style.color = "Gray";
            } 
        }
    
    </script>
</head>
<body>
    <input id="search" type="text" onfocus="t()" onblur="t1()" value="请输入关键字……" style="color: Gray" />
</body>
</html>