HTML常用技巧记录

来源：互联网发布：zjf后缀是什么软件编辑：程序博客网时间：2024/04/28 20:06

HTML常用技巧记录

HTML常用技巧记录
- 通用
- 表单
  - 禁止input自动填充
    - 属性autocompleteoff
    - input标签不写name和id属性
    - 倔强的chrome
- 获取屏幕信息

通用：

禁止文字被选择：

<div onselectstart="javascript:return false;" >不让选</div>

改变鼠标指针覆盖时样式：

<div style="cursor: pointer;">手型鼠标</div>

<div onselectstart="javascript:return false;" style="cursor: pointer;">访原生样式</div>

表单

禁止input自动填充：

属性`autocomplete="off"`

<input type="text" name="userName" id="userName" autocomplete="off" >

`input`标签不写`name`和`id`属性

<input type="text">

倔强的chrome

今天发现chrome添加autocomplete="off"属性也不起作用，后来在这里找到了解决办法：
在<head></head>标签中添加如下js代码：

<script>    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {        $(window).load(function(){            $('input:not(input[type=submit])').each(function(){                var outHtml = this.outerHTML;                $(this).append(outHtml);            });        });    }</script>

图片按钮：

<input type="image" src="http://wangxiaoan1234.github.io/images/button.png">

获取屏幕信息：

function getInfo(){        var s = "";        s += " 网页可见区域宽："+ document.body.clientWidth+"\n";        s += " 网页可见区域高："+ document.body.clientHeight+"\n";        s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";        s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"\n";        s += " 网页正文全文宽："+ document.body.scrollWidth+"\n";        s += " 网页正文全文高："+ document.body.scrollHeight+"\n";        s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"\n";        s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"\n";        s += " 网页被卷去的左："+ document.body.scrollLeft+"\n";        s += " 网页正文部分上："+ window.screenTop+"\n";        s += " 网页正文部分左："+ window.screenLeft+"\n";        s += " 屏幕分辨率的高："+ window.screen.height+"\n";        s += " 屏幕分辨率的宽："+ window.screen.width+"\n";        s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";        s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";        s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";        s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";        alert (s);    }    getInfo();

阅读全文

0 0

HTML常用技巧记录

HTML常用技巧记录

通用：

表单

禁止input自动填充：

属性autocomplete="off"

input标签不写name和id属性

倔强的chrome

获取屏幕信息：

属性`autocomplete="off"`

`input`标签不写`name`和`id`属性