推广页前端样式及js效果处理(个人收藏总结)

-- 推广页面前端常用css样式及js效果处理(个人收藏总结)
【官网】:#

应用场景

中小企业在维护自己的站点页面时,如果缺乏前端部门和网页设计人员时,可以通过本页快速维护一些日常处理。

基础资源

具备一定的js,css,html技能

使用须知

修改之前记得先备份站点

配置步骤



【iframe页高度自适应】

1.解决IE,google下的自适应高度问题。
  1.1.去掉最外层的带有float的样式属性(这会影响body高度的获取)
  1.2. function SetIfameHeight() {
            var oIframe = window.parent.document.getElementById("_mainIframe");
            var iHeight = parseInt(oIframe.contentWindow.document.body.scrollHeight);
            oIframe.setAttribute("height", (iHeight + 100));
            $(oIframe).attr("style", "height:" + (iHeight + 100) + "px");
            iIncreaseFrameLength++;
        }
        function SetIframeHeightForFirst() {
            var oIframe = window.parent.document.getElementById("_mainIframe");
            var iHeight = parseInt(oIframe.contentWindow.document.body.scrollHeight);
            oIframe.setAttribute("height", iHeight);
            $(oIframe).attr("style", "height:" + iHeight  + "px");
        }
        $(function () {
            SetIframeHeightForFirst();
            $("#_mainIframe", parent.document).height($(document.body).height());
        });

【数据不同项并行错位的问题】


.box1_n ul{width:280px;overflow: hidden;}//一般只要有overflow:hidden就可以让没有设置宽度得li换行
.box1_n ul li{width:280px;line-height:23px;overflow: hidden;}


【关于html标记与卡死的问题】

1.症状:IE浏览器中点击页面链接卡死,目标页确定没有问题(单独可以访问)
原因:部分span标签没有闭合的,都是这样写的.这就造成解析html的时候,容错较差的浏览器出现异常.

【关于元素浮动错乱】
1.通常如果有编辑器编辑的含html的内容,都不能用截取去解决溢出的问题,只能是用ovewflow=hidden解决. 因为简单截取会导致样式错乱


【关于下拉提示被遮盖了】
1.调整父级元素的overflow="hidden",将该属性去掉.



【jquery动态注册事件】


关于js动态添加的元素,不受初始化jquery注册函数的影响的问题..
$(".main-left li p").click(function(){
     //这种写法,仅对页面初始化时存在的元素注册了事件
});
$(".main-left").on(‘click‘, ‘li p‘, function () {
     //这种写法,对页面初始化时存在的元素以及后面动态创建的元素都注册了事件..
});


【关于ul与li的问题】
1.有时几个会挤在一行,有时是因为
中的有浮动,由于没有设置宽高,那么如果文字还比较小的话,盒子模型会认为第一行有足够的空间容纳,因此会上去,这时只需要设置height:23px,line-height:23px;


【a标签下划线】

下划线:text-decoration:underline

常见问题

快速入门

【关于js中的this】

1.)对this来说,在没有new function等情况下,一般所属的Object({})才是对象,所属的function不算对象. this都是指所属的最近的一层对象.
例如:{u="123", fn=function(){alert(this.u);}}  这里面的this.u就是指123.
2.)函数创建时无法确定this的作用域,只有调用时才能确定.
<2.1>
o.b.fn();//fn中的this指向b对象.
<2.2>
var j=o.b.fn();//这里只是创建时
j(); //fn中的this指向window对象, 因为这是调用时确定的.
3.)在var a=new functionA()的时候,相当于把函数放到一个对象里去,这时a就相当于1个对象.


【关于js中urlencode】

var decToHex = function(str) {
    var res=[];
    for(var i=0;i < str.length;i++)
        res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);
    return "\\u"+res.join("\\u");
}
var hexToDec = function(str) {
    str=str.replace(/\\/g,"%");
    return unescape(str);
}

参考资料