CSS使用总结

1、transition与display冲突问题

https://blog.csdn.net/madman0621/article/details/82431641
当对元素设置display:none 和block来设置渐变效果时，此时设置transition是没有效果的。因为当时元素不存在。

2、使用js获取文档/视窗高度

https://www.cnblogs.com/nanshanlaoyao/p/5964730.html

1）/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
*document.documentElement.clientWidth或者document.body.clientWidth
*来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
*使用方法 ： getViewPort().width;

 */
function getViewPort () {
    if(document.compatMode == "BackCompat") {   //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

2）//获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙

function getDocumentPort () {
    if(document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
        }
    }
}

3、js获取元素的滚动高度，和距离顶部的高度

https://www.cnblogs.com/wangyihong/p/8056859.html

监听页面滚动及滚动到指定位置
https://www.jianshu.com/p/4bf613d8c927

4、vue同页面跳转锚点/跨页锚点定位

同页面

	custormAnchor(name){
        // 找到锚点
        let anchorElement = document.getElementById(name);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }

跨页：

mounted(){
    let that = this
    let id = that.$route.params.id
    console.log(id)
    that.custormAnchor(id)
},

5、 显示N行文字，超过的显示省略号

	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

6、原生js获取元素的样式style属性值
https://www.jianshu.com/p/533526c9f755

ele.style 的使用：只读内联样式属性

7、特殊日期网站设置为黑白样式

<script type="text/javascript" src="js/grayscale.js" ></script>
<style>
html, html *{
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); 
}
</style>
<script type="text/javascript">
    var navStr = navigator.userAgent.toLowerCase();
    if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
        grayscale(document.body);
        grayscale(document.getElementsByTagName("img"));
    }
</script>

https://www.cnblogs.com/sakura-panda/p/12626484.html

	getComputedStyle(document.getElementById('caseroul'),null).getPropertyValue(‘left’)：

获取一个元素的所有来自四面八方设置的样式属性