前端知识整理
文章目录
- jquery 如何控制left，top.
- js 如何获取浏览器可视区域尺寸呢？
- css 如何修改输入框placeholder默认颜色
- jq 获取input输入框的值
- 给按钮绑定事件
- 按钮左边圆角右边方角
- 消除input, button 之间的间距
- 输入框从中间输入
- 参考
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默认颜色
<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