前端知识整理

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值