<p>JS实现的插入样式的方法，摘抄自citypick插件</p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;"><span style="color:#f92672;">var </span><span style="color:#a6e22e;">styleInject </span><span style="color:#f92672;">= function </span>(<span style="color:#fd971f;font-style:italic;">css</span>, <span style="color:#fd971f;font-style:italic;">elem</span>) {<br/> <span style="color:#f92672;">if </span>(<span style="color:#f92672;">!</span><span style="color:#fd971f;font-style:italic;">css </span><span style="color:#f92672;">|| typeof </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">document </span><span style="color:#f92672;">=== </span><span style="color:#e6db74;">'undefined'</span>) {<br/> <span style="color:#f92672;">return</span>;<br/> }<br/><br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">head </span><span style="color:#f92672;">= </span><span style="color:#fd971f;font-style:italic;">elem </span><span style="color:#f92672;">? </span><span style="color:#fd971f;font-style:italic;">elem </span><span style="color:#f92672;">: </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">document</span>.<span style="color:#4ac60a;">getElementsByTagName</span>(<span style="color:#e6db74;">'head'</span>)[<span style="color:#ae81ff;">0</span>];<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">style </span><span style="color:#f92672;">= </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">document</span>.<span style="color:#4ac60a;">createElement</span>(<span style="color:#e6db74;">'style'</span>);<br/> <span style="color:#64a2a2;">style</span>.<span style="color:#660e7a;font-weight:bold;">type </span><span style="color:#f92672;">= </span><span style="color:#e6db74;">'text/css'</span>;<br/><br/> <span style="color:#f92672;">if </span>(<span style="color:#64a2a2;">head</span>.<span style="color:#660e7a;font-weight:bold;">firstChild</span>) {<br/> <span style="color:#64a2a2;">head</span>.<span style="color:#4ac60a;">insertBefore</span>(<span style="color:#64a2a2;">style</span>, <span style="color:#64a2a2;">head</span>.<span style="color:#660e7a;font-weight:bold;">firstChild</span>);<br/> } <span style="color:#f92672;">else </span>{<br/> <span style="color:#64a2a2;">head</span>.<span style="color:#4ac60a;">appendChild</span>(<span style="color:#64a2a2;">style</span>);<br/> }<br/><br/> <span style="color:#f92672;">if </span>(<span style="color:#64a2a2;">style</span>.<span style="color:#660e7a;font-weight:bold;">styleSheet</span>) {<br/> <span style="color:#64a2a2;">style</span>.<span style="color:#660e7a;font-weight:bold;">styleSheet</span>.<span style="color:#660e7a;font-weight:bold;">cssText </span><span style="color:#f92672;">= </span><span style="color:#fd971f;font-style:italic;">css</span>;<br/> } <span style="color:#f92672;">else </span>{<br/> <span style="color:#64a2a2;">style</span>.<span style="color:#4ac60a;">appendChild</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">document</span>.<span style="color:#4ac60a;">createTextNode</span>(<span style="color:#fd971f;font-style:italic;">css</span>));<br/> }<br/>};<br/><span style="color:#f92672;">var </span><span style="color:#64a2a2;">css </span><span style="color:#f92672;">= </span><span style="color:#e6db74;">'.city-picker-input{opacity:0 !important;top:-9999px;left:-9999px;position:absolute;}.city-picker-span{position:relative;display:block;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);border-bottom:1px solid #ccc;background-color:#fff;color:#ccc;cursor:pointer;}.city-picker-span > .placeholder{color:#aaa;}.city-picker-span > .arrow{position:absolute;top:50%;right:8px;width:10px;margin-top:-3px;height:5px;background:url(/static/plugs/city-picker/images/drop-arrow.png) -10px -25px no-repeat;}.city-picker-span.focus,.city-picker-span.open{border-bottom-color:#46A4FF;}.city-picker-span.open > .arrow{background-position:-10px -10px;}.city-picker-span > .title > span{color:#333;padding:5px;border-radius:3px;}.city-picker-span > .title > span:hover{background-color:#f1f8ff;}.city-picker-dropdown{position:absolute;width:315px;left:-9999px;top:-9999px;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:999999;display:none;min-width:330px;margin-bottom:20px;}.city-select-wrap{box-shadow:0 1px 5px rgba(0,0,0,0.5);}.city-select-tab{border-bottom:1px solid #ccc;background:#f0f0f0;font-size:13px;}.city-select-tab > a{display:inline-block;padding:8px 22px;border-left:1px solid #ccc;border-bottom:1px solid transparent;color:#4D4D4D;text-align:center;outline:0;text-decoration:none;cursor:pointer;font-size:14px;margin-bottom:-1px;}.city-select-tab > a.active{background:#fff;border-bottom:1px solid #fff;color:#46A4FF;}.city-select-tab > a:first-child{border-left:none;}.city-select-tab > a:last-child.active{border-right:1px solid #ccc;}.city-select-content{width:100%;min-height:10px;background-color:#fff;padding:10px 15px;box-sizing:border-box;}.city-select{font-size:13px;}.city-select dl{line-height:2;clear:both;padding:3px 0;margin:0;}.city-select dt{position:absolute;width:2.5em;font-weight:500;text-align:right;line-height:2;}.city-select dd{margin-left:0;line-height:2;}.city-select.province dd{margin-left:3em;}.city-select a{display:inline-block;padding:0 10px;outline:0;text-decoration:none;white-space:nowrap;margin-right:2px;color:#333;cursor:pointer;}.city-select a:hover,.city-select a:focus{background-color:#f1f8ff;border-radius:2px;color:#46A4FF;}.city-select a.active{background-color:#46A4FF;color:#fff;border-radius:2px;}'</span>;<br/><span style="color:#a6e22e;">styleInject</span>(<span style="color:#64a2a2;">css</span>);</pre><p><br/></p>
相关文章
