有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
html:
<p>你可以选择我。</p>
<p class="noselect">你不能选择我!</p>
css:
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
需要注意的是:
1、user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 。
2、在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on",否则可能不会生效哦。
除了css外,我们同样可以使用js来实现:
document.body.onselectstart = document.body.ondrag =function(){
return false;
}
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。
在项目开发的过程中,基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题,还需要与别人协同合作,以避免两者之间的冲突。
禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放;设置元素在另一个元素的最底部;设置背景颜色,不透明度
CSS便捷开发小工具汇总:包括:prefixfree前缀补全插件(或其他后缀-o-,-ms-,-moz-)、Normalize.css一个CSS Reset工具、Grunt 常用的包括CSS/JS的自动合并压缩, LESS/SASS 的自动编译等
JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。
如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则
我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。
转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。
之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西
生活中衡量一个人有气质:穿着打扮举止言行等等,编程中如何衡量一个人的代码能力?规范标准优雅高质量等等一个词形容专业从代码中看出是否有经验..
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!