前端知识整理

最新推荐文章于 2024-08-15 15:54:59 发布

幽默的荆轲君

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量168

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/funnyPython/article/details/99642373

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

jquery 如何控制left，top.

如果修改的是left, top. 需要加上position. 例如：

$("#tooltip").css({top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});

查找原因才发现跟元素的定位类型有关，改为

$("#tooltip").css({"position": "absolute","top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"})

js 如何获取浏览器可视区域尺寸呢？

在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：

document.body.offsetWidth
document.body.offsetHeight

在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：

document.documentElement.clientWidth
document.documentElement.clientHeight

IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：

window.innerWidth
window.innerHeight

css 如何修改输入框placeholder默认颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: blue;
            opacity:1; 
            font-size: 5px;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: red;
            opacity:1;
        }
        /* 以上两个属性分别针对火狐浏览器不同版本 */

        input:-ms-input-placeholder { /* IE */
            color: yellowgreen;
            opacity:1; 
        }

        input::-webkit-input-placeholder{/* webkit内核的浏览器，如谷歌，edge */
            color: blue;
            opacity:1;
            font-size: 15px;
        }

        /*input::placeholder{/* 去掉私有前缀，谷歌和火狐有效；IE和edge无效 */
          /*  color: orchid;
            opacity:1;
            font-size: 15px;
        }*/

        </style>
    </head>
    <body>
        <input name="secret" placeholder="请输入悄悄话" />
    </body>
</html>

jq 获取input输入框的值

<form id="form1">
        <table border="0">
            <tr>
                <td>
                    姓名：
                </td>
                <td>
                    <input id="name" name="name" type="text" />
                </td>
            </tr>
        </table>
   </form>

       function readtext() {
 
            // 方法一
            var name = document.getElementById("name").value;
            alert(name);
 
            // 方法二
            name = form1.name.value;
            alert(name);
 
            // 方法三 jquery
            name = $("#name").val();
            alert(name);
 
            // 方法四 jquery
            name =  $("input[id='name']").val();
            alert(name);
 
            // 方法五 jquery
            name = $("#name").attr("value");
            alert(name);
 
            // 方法六 jquery
            name = $("input[id='name']").attr("value");
            alert(name);
                      
        }

给按钮绑定事件

$('#js-add-fontsize').on('click',function(event){
   $editor.css('font-size','20px');
});

按钮左边圆角右边方角

.styleOne{
border-top-left-radius: 6px;
border-top-right-radius: 0px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 0px;
}

消除input, button 之间的间距

1.在父级元素上设置属性：font-size:0px;
将input父级字体(font-size)设为0px，可以消除间隔，但是得重新设置内联元素(input)的字体大小;
2.去掉input，button标签之间的空格
3.设置input为块元素，并且给一个左浮动

输入框从中间输入

<input type="text" name="mid" style="text-align:center;">

参考

https://blog.csdn.net/axzywan/article/details/7497542
http://www.daqianduan.com/3784.html
https://blog.csdn.net/j080624/article/details/79312870
https://www.cnblogs.com/chivasknight/p/8279069.html
https://blog.csdn.net/weistin/article/details/79526204