说说墙-想说就说 - Phpvar's Blog

phpvar 2014/10/29 下午 5:39

HTML5 data-* 自定义属性读写方式：
https://www.cnblogs.com/dolphinX/p/3348458.html

#151

phpvar 2014/10/29 下午 4:43

HTML 全局属性accesskey如： accesskey=“d” 可使用Alt + d (或者 Shift + Alt + d) 来激活带有指定快捷键的元素。

#152

phpvar 2014/10/27 下午 5:43

代码：
<style>
*{margin: 0;padding: 0;}
.box{width: 400px;height: 500px;border: 1px solid #f00;text-align: center;display: table;position: relative;}
.box span{display: table-cell;vertical-align: middle;*position: absolute;*left: 50%;*top: 50%;}
.box img{background-color: #f00;*position: relative;*left: -50%;*top: -50%;}
</style>
<div class=”box”>
<span><img src=”#” alt=”” width=”200″ height=”100″></span>
</div>
不定高度图片垂直居中兼容写法，ie7以下的浏览器还是很恶心的说….

#153

phpvar 2014/10/27 下午 4:25

作业薄css3实现效果：

第1行
第2行

作业薄css3实现代码：
<div class=”lines”>第1行 <br/>第2行</div>
<style>
.lines{width: 200px;height: 209px;padding: 0 5px;line-height: 30px;
background:-webkit-linear-gradient(#f9f9f9 29px, #ccc 30px);
background:-o-linear-gradient(#f9f9f9 29px, #ccc 30px);
background:linear-gradient(#f9f9f9 29px, #ccc 30px);
background-size: 100% 30px;
background-attachment: local;
}
</style>
实现思路解析：
linear-gradient实现单行线效果，但要整个容器行线平铺，要用background-size，将linear-gradient定义的背景图定义成30px高的背景图片，这样才有平铺效果出来！

#154

phpvar 2014/10/27 下午 5:43

代码：
<style>
*{margin: 0;padding: 0;}
.box{width: 400px;height: 500px;border: 1px solid #f00;text-align: center;display: table;position: relative;}
.box span{display: table-cell;vertical-align: middle;*position: absolute;*left: 50%;*top: 50%;}
.box img{background-color: #f00;*position: relative;*left: -50%;*top: -50%;}
</style>
<div class=”box”>
<span><img src=”#” alt=”” width=”200″ height=”100″></span>
</div>
不定高度图片垂直居中兼容写法，ie7以下的浏览器还是很恶心的说….

#155

phpvar 2014/10/27 下午 4:25

作业薄css3实现效果：

第1行
第2行

作业薄css3实现代码：
<div class=”lines”>第1行 <br/>第2行</div>
<style>
.lines{width: 200px;height: 209px;padding: 0 5px;line-height: 30px;
background:-webkit-linear-gradient(#f9f9f9 29px, #ccc 30px);
background:-o-linear-gradient(#f9f9f9 29px, #ccc 30px);
background:linear-gradient(#f9f9f9 29px, #ccc 30px);
background-size: 100% 30px;
background-attachment: local;
}
</style>
实现思路解析：
linear-gradient实现单行线效果，但要整个容器行线平铺，要用background-size，将linear-gradient定义的背景图定义成30px高的背景图片，这样才有平铺效果出来！

#156

phpvar 2014/10/23 下午 2:20

setTimeout 变量作用域链查找
var a=1;
setTimeout(function(){
alert(window.a); //2
alert(a); // alert undefined 首先在匿名函数作用域中查找搜索，后面有声明 var a ,在声明之前调用自然就是undefined
var a=3;
},1000);
a=2;

#157

phpvar 2014/10/23 下午 2:20

setTimeout 变量作用域链查找
var a=1;
setTimeout(function(){
alert(window.a); //2
alert(a); // alert undefined 首先在匿名函数作用域中查找搜索，后面有声明 var a ,在声明之前调用自然就是undefined
var a=3;
},1000);
a=2;

#158

phpvar 2014/10/17 下午 6:02

获取iframe scr的页面高度：
非跨域：
<iframe src=”https://www.test.org/myiframe.html” frameborder=”0″ width=”100%” id=”ifr” height=”100%” marginwidth=”0″ marginheight=”0″></iframe>

原生js:
window.onload=function(){
var topframe=document.getElementById(“ifr”);
var ifrDoc=topframe.contentDocument|| topframe.contentWindow.document;
topframe.style.height=Math.max(ifrDoc.documentElement.scrollHeight,ifrDoc.documentElement.clientHeight)+”px”;
}

jq:

$(window).load(function(){
var topframe=$(“#ifr”);
var ifrDoc=$(“#ifr”).contents();
topframe.height(ifrDoc.height());
})

跨域：(参考文章)
location.hash 实现跨域 iframe 自适应
https://www.oschina.net/code/snippet_54100_592

#159

phpvar 2014/10/17 下午 6:02

获取iframe scr的页面高度：
非跨域：
<iframe src=”https://www.test.org/myiframe.html” frameborder=”0″ width=”100%” id=”ifr” height=”100%” marginwidth=”0″ marginheight=”0″></iframe>

原生js:
window.onload=function(){
var topframe=document.getElementById(“ifr”);
var ifrDoc=topframe.contentDocument|| topframe.contentWindow.document;
topframe.style.height=Math.max(ifrDoc.documentElement.scrollHeight,ifrDoc.documentElement.clientHeight)+”px”;
}

jq:

$(window).load(function(){
var topframe=$(“#ifr”);
var ifrDoc=$(“#ifr”).contents();
topframe.height(ifrDoc.height());
})

跨域：(参考文章)
location.hash 实现跨域 iframe 自适应
https://www.oschina.net/code/snippet_54100_592

#160

phpvar 2014/09/20 上午 11:37

document.compatMode==”BackCompat” 什么时候会用到？
在不声明Doctype文档申明的情况下，IE默认就是Quirks Mode即怪异模式（ie调试工具文档模式中有标识）。其实不止ie,要文档没申明Doctype其它浏览器也会识别成怪异模式即BackCompat模式，此时document.compatMode==”BackCompat”

另外，当文档有了标准声明即Standards Mode下， document.compatMode 的值等于 “CSS1compat”

#161

phpvar 2014/09/10 下午 11:36

a、input、button标签点击或获得焦点时,标准浏览器去掉虚线方法：outline:none; ie方法：hidefocus=”true”

#162

phpvar 2014/09/08 下午 5:05

元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。也就是说，假如这个元素宽是60px，高是50px（border-box的尺寸），那么border-radius:50%的结果等同于border-radius:30px/20px;。

另外需要注意的是：
对于margin和padding，其任意方向的百分比值，参照都是包含块的宽度。

详细解说，站外文章：
https://acgtofe.com/posts/2014/06/percentage-in-css/

#163

phpvar 2014/09/03 上午 1:24

pc浏览器中修改选中区域的背景颜色:
::selection {
background: rgba(231,105,105,0.7);
}
手机上的浏览器如果点击或长按文字，图片，链接，或其它页面元素也会出现选中高亮的颜色，自定义方法：
-webkit-tap-highlight-color: rgba(0,0,0,1);
-moz-tap-highlight-color: rgba(0,0,0,1);
-o-tap-highlight-color: rgba(0,0,0,1);
-ms-tap-highlight-color: rgba(0,0,0,1);
tap-highlight-color: rgba(0,0,0,1);
将rgba第4个参数属性写成0,即透明不可见，即：tap-highlight-color: rgba(0,0,0,0);
或
tap-highlight-color: transparent;

qq手机浏览器直接不支持选中高亮色的自主义，无语…

#164

phpvar 2014/09/02 下午 3:14

2014.09.02，截至目前为止，手机浏览器像qq浏览器、uc浏览器对css3 的多行布局新旧版的属性flex-wrap/-webkit-box-lines:multiple仍不支持，display: flex;属性也只能识别旧版写法：display: -webkit-box;

固用css3做单行的自适应布局，结合使用display: -webkit-box; + -webkit-box-flex 还行，其它布局属性，考虑到手机浏览器普遍不支持，不建议使用！

#165

phpvar 2014/09/02 上午 10:44

一个朋友问我：“我的iPhone为什么删软件时所有图标都在抖啊？” 我严肃de跟他说：“因为它们害怕你把它们删了。” 他认真想了想又问我：“自带的程序删不了，为什么它们也抖呢？” 我不得不更认真de回答他：“亲，那不是在抖，那是在得瑟…”

#166

phpvar 2014/08/30 下午 4:24

在弹出层中调用ZeroClipboard复制插件会失效？？

其实是弹出层的z-index值比ZeroClipboard.js设置的复制层z-inex:99 大，flash所在的复制层被弹出层遮盖住了而已，而不是在弹出层中调用ZeroClipboard复制插件会失效！

弹出层显示时，可用调试器查看ZeroClipboard的复制层其实是有正常加载的，调下z-index值就能看到了！！

#167

phpvar 2014/08/13 下午 4:39

UC的U3内核、手机QQ浏览器的X5内核以及华为天天的T9内核（以上均为Android平台）均基于开源内核Webkit开发，在Webkit的基础上进行二次优化，并不能算是完全的自主内核

#168

phpvar 2014/08/06 下午 10:49

双屏显示器，快速将当前窗口在主、次显示屏中自由切换的快捷键：shift+win+←/→

#169

phpvar 2014/08/04 上午 10:46

document.write()方法只有在解析文档的时才能用来生成内容到当前页面中，否则它将清除当前页面的内容。
即是说：
<script>
window.onload=function(){
document.write(“ttttt!!”);
}
</script>
会重写整个页面

#170

phpvar 2014/08/04 上午 10:46

document.write()方法只有在解析文档的时才能用来生成内容到当前页面中，否则它将清除当前页面的内容。
即是说：
<script>
window.onload=function(){
document.write(“ttttt!!”);
}
</script>
会重写整个页面

#171

phpvar 2014/07/22 上午 11:00

IE6行高(line-height)失效bug:
IE6下为行内块元素单独设置
margin:/* (父级所属line-height – 自身高度)/2px 0 */;

#172

phpvar 2014/07/18 上午 11:18

自执行的匿名函数,3种写法：
(function(){})();
!function(){}();
~function(){}();
后2种，使用用void操作符: ~操作符，!操作符，别说你知道….

#173

phpvar 2014/07/18 上午 10:37

switch case中带return，还需要break;吗？
break是直接退出switch语句
return是退出该函数也就是switch语句块后面的语句也不执行了,这里break;就可忽略不写了。
当然switch case 带return，前提是switch 在函数里面，函数才能使用return!

#174

phpvar 2014/07/16 上午 10:26

获取百度地标值：
https://api.map.baidu.com/lbsapi/getpoint/index.html
或
https://developer.baidu.com/map/jshome.htm 页面的“逆/地理编码” api 接口

#175