Doc13(样式浮动及文本框空就变色)

最新推荐文章于 2023-04-02 23:26:00 发布

天赋进行时

最新推荐文章于 2023-04-02 23:26:00 发布

阅读量253

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50600793

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

样式浮动

关键字:styleFloat,cssFloat
Float,翻译为浮动
styleFloat是在IE等浏览器中的写法,cssFloat是在火狐浏览中的写法
兼容性写法同样要使用能力检测(类型检测).

语法:document.getElementById(‘dv’).style.styleFloat=’参数’;

实例:

<!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">
        onload = function () {
            document.getElementById('btn').onclick = function () {

                //这里是ie的写法,在火狐中无法支持.
             //   document.getElementById('dv').style.styleFloat = 'right';
                //火狐的写法
                //   document.getElementById('dv').style.cssFloat = 'right';
             //下面是一种兼容写法.能力检测
                if (typeof (document.getElementById('dv').style) == 'string') {
                    document.getElementById('dv').style.styleFloat = 'right';
                } else {
                    document.getElementById('dv').style.cssFloat = 'right';
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value=" 移动" id='btn' />
    <div id='dv' style=' width:300px; height:200px; background-color: Green;'>
    </div>

</body>
</html>

该实例设置一个按钮,点击后层会从左边浮动到右边.
注意点:该语法中最后要设置什么值都需要引号引上!

文本框为空则变色练习

关键字:onblur
翻译:失去焦点
注意:失去焦点的含义指的是,先获得焦点,在失去焦点.而获取焦点的途径为鼠标左键
整体思路:使用getElementsByTagName(‘标签类型’)或者name获取对象的集合,通过
for循环为每一个对象附上失去焦点的事件.
实例:

<!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">
        onload = function () {

            var inputs = document.getElementsByTagName('input');

            for (var i = 0; i < inputs.length; i++) {//length 英文别写错啊魂淡
                //onblur 失去焦点 
                //遍历循环为每一个文本框都设置一个焦点.
                inputs[i].onblur = function () {
                    if (this.value.length == 0) {
                        this.style.backgroundColor = 'red'; //这里的颜色需要加上引号
                    } else {
                        this.style.backgroundColor = ''; //这样子写表示还原为默认颜色,注意失去焦点指的是鼠标点击后有点击别的地方
                    }
                };
            }
        };

    </script>
</head>
<body>

    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>

知识点:设定属性值例如背景颜色设置为red时必须加上引号.还原默认值直接两个单引号.

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Doc13(样式浮动及文本框空就变色)

样式浮动关键字:styleFloat,cssFloat Float,翻译为浮动 styleFloat是在IE等浏览器中的写法,cssFloat是在火狐浏览中的写法兼容性写法同样要使用能力检测(类型检测).语法:document.getElementById(‘dv’).style.styleFloat=’参数’;实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XH
复制链接

扫一扫