• 前端小技巧


    前端小技巧

    一、网页各种宽高

    页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域宽: document.body.offsetWidth (包括边线的宽);
    网页可见区域高: document.body.offsetHeight (包括边线的宽);
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文部分上: window.screenTop;
    网页正文部分左: window.screenLeft;
    屏幕分辨率的高: window.screen.height;
    屏幕分辨率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;

     

    IE

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

    Firefox

    document.documentElement.scrollHeight ==> 浏览器所有内容高度
    document.body.scrollHeight ==> 浏览器所有内容高度
    document.documentElement.scrollTop ==> 浏览器滚动部分高度
    document.body.scrollTop ==>始终为0
    document.documentElement.clientHeight ==>浏览器可视部分高度
    document.body.clientHeight ==> 浏览器所有内容高度

    Chrome

    document.documentElement.scrollHeight ==> 浏览器所有内容高度
    document.body.scrollHeight ==> 浏览器所有内容高度
    document.documentElement.scrollTop==> 始终为0
    document.body.scrollTop==>浏览器滚动部分高度
    document.documentElement.clientHeight ==> 浏览器可视部分高度
    document.body.clientHeight ==> 浏览器所有内容高度

     

    二、超出部分省略号

    1、单行文本的溢出显示省略

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

     

    2、多行文本的溢出显示省略

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

     

    3、数字、字母换行

    word-break:break-all;

    word-wrap:break-word;

     

    4、js转换成百分数保留两位小数

    var str=Number(data*100).toFixed(2);

    str+="%";

     

    5、鼠标滑过一个div,如何控制另一个div

    $(".nav_li").hover(function () {
      $(".div_tip").show();
    }, function () {
      $(".div_tip").hide();
    })

     

     

  • 相关阅读:
    HTTP 协议 简述
    Git 远程仓库相关
    Git 冲突问题
    单例模式
    extends Thread 与 implements Runnable 的区别
    正则表达式语法大全
    [Hadoop源码解读](六)MapReduce篇之MapTask类
    [Hadoop源码解读](五)MapReduce篇之Writable相关类
    [Hadoop源码解读](四)MapReduce篇之Counter相关类
    [Hadoop源码解读](三)MapReduce篇之Job类
  • 原文地址:https://www.cnblogs.com/Michelle20180227/p/10695083.html
Copyright © 2020-2023  润新知