js、jquery、css使用过程中用到的一些方法技巧

浏览数：29 / 时间：2015年06月09日

　　1、动态创建script/link/style标签

    //动态创建link
    var link=document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", url);
    
    var heads = document.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(link);
    else
        document.documentElement.appendChild(link);
    //动态创建style
    var style=document.createElement("style");
    style.setAttribute("type", "text/css");
    
    if(style.styleSheet){// IE
        style.styleSheet.cssText = cssString;
    } else {// w3c
        var cssText = document.createTextNode(cssString);
        style.appendChild(cssText);
    }
    
    var heads = document.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(style);
    else
        document.documentElement.appendChild(style);
    //动态创建script
    var script=document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "JustWalking.js");
    var heads = document.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(script);
    else
        document.documentElement.appendChild(script);

　　2、在不适合使用iframe的情况下，让页面像iframe那样能分块滚动

　　由于页面中用到了jquery-jstree插件，

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/inc.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>所有菜单资源</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="javascript">
    $(function(){
        //计算当前页面的高度、宽度
        var clientHeight, clientWidth;
        if($.browser.msie){
            //如何是IE浏览器document.body.clientHeight属性得到窗口高度
            clientHeight = document.body.clientHeight;
            clientWidth = document.body.clientWidth;
        } 
        else{// w3c
            clientHeight = self.innerHeight;
            clientWidth = self.innerWidth;
        }
        //客户区高度减去#menuTree div距离客户区顶部的距离
        clientHeight = clientHeight - $("#menuTree").position().top;
        //动态创建#menuTree div的css
        var css = "#menuTree {width:" + clientWidth + "px;height:" + clientHeight+ "px;overflow:scroll;}";
        var style=document.createElement("style");
        style.setAttribute("type", "text/css");
      
        if(style.styleSheet){// IE
            style.styleSheet.cssText = css;
        } else {// w3c
            var cssText = document.createTextNode(css);
            style.appendChild(cssText);
        }
        
        var heads = document.getElementsByTagName("head");
        if(heads.length)
            heads[0].appendChild(style);
        else
            document.documentElement.appendChild(style);
    });
　　// 其他代码...
</script>
</head>
<body>
    <a href="system/acl!allMenuResource.action?params">菜单授权</a>&nbsp;
    <a href="system/acl!allActionResource.action?params">操作授权</a>&nbsp;
    <a href="javascript:auth()">保存授权</a>&nbsp;|
    <a href="javascript:permit_all()">全部允许</a>&nbsp;
    <a href="javascript:deny_all()">全部拒绝</a>&nbsp;
    <a href="javascript:extends_all()">全部继承</a>&nbsp;
    <a href="javascript:cancel_all()">全部取消</a>
    <hr/>
    <div id="menuTree">
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <s:iterator value="#menuIds">
                <td width="150" valign="top">
                    <div id="menuTree_<s:property/>"></div>
                </td>
                </s:iterator>
            </tr>
        </table>
    </div>
</body>
</html>