js獲取id的方法是不是也存在兼容性呢？
我跟著教程寫了下用原生js實(shí)現(xiàn)，經(jīng)過測試，在火狐中可以，但在chrome中就不行；經(jīng)過調(diào)試，我發(fā)現(xiàn)在chrome中獲取的id值是不對(duì)的
突然想起you
2015-02-28
2 回答
舉報(bào)
0/150
提交
取消
2015-02-28
代碼如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁定位導(dǎo)航效果 使用原生js</title>
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.7; color:#333;}
ul,li{ list-style:none;}
#menu{ position:fixed; top:100px; left:50%; margin-left:400px; width:80px;}
#menu ul li a{ display:block; margin:5px 0; font-size:14px; font-weight:bold; text-decoration:none; color:#333; width:80px; height:50px; line-height:50px; text-align:center;}
#menu ul li a:hover,
#menu ul li a.current{ color:#FFF; background-color:#009;}
#content{ width:800px; margin:0 auto; padding:20px;}
#content h2{ color:#F30;}
#content .item{ padding:20px; margin-top:20px; border:2px dotted #003333; height:200px;}
#content .item h3{ font-size:16px; border-bottom:2px solid #039; margin-bottom:10px;}
? ? /*hack*/
? ? *html,*html body{background-image: url(about:blank);background-attachment: fixed;}
? ? *html #menu{position: absolute;top: expression(((e=document.documentElement.scrolltop)?e:document.body.scrolltop)+100+'px');}?
</style>
<script>
? ? //根據(jù)classname獲取元素
? ? function getByclassName(obj,cls){
? ? ? ? var e = obj.getElementsByTagName("*");
? ? ? ? var result = [];
? ? ? ? for (var i=0;i<e.length;i++){
? ? ? ? ? ? if(e[i].className == cls){
? ? ? ? ? ? ? ? result.push(e[i]);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return result;
? ? }
? ??
? ? function hasClass(obj,cls){
? ? ? ? return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
? ? }
? ??
? ? function removeClass(obj,cls){
? ? ? ? if(hasClass(obj,cls)){
? ? ? ? ? ? //remove
? ? ? ? ? ? var req = new RegExp("(\\s|^)" + cls + "(\\s|$)");
? ? ? ? ? ? obj.className = obj.className.replace(req,"");
? ? ? ? }
? ? }
? ??
? ? function addClass(obj,cls){
? ? ? ? if(!hasClass(obj,cls)){
? ? ? ? ? ? obj.className += " " +cls;
? ? ? ? }
? ? }
? ??
? ? window.onload = function(){
? ? ? ? window.onscroll = function(){
? ? ? ? ? ? var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
? ? ? ? ? ? var menus = document.getElementById("menu").getElementsByTagName("a");
? ? ? ? ? ? var items = getByclassName(document.getElementById("content"),"item");
? ? ? ? ? ??
? ? ? ? ? ? var currentId = "";
? ? ? ? ? ??
? ? ? ? ? ? for(var i=0;i<items.length;i++){
? ? ? ? ? ? ? ? var _item = items[i];
? ? ? ? ? ? ? ? console.log(_item.id);
? ? ? ? ? ? ? ? var _itemTop = _item.offsetTop;
? ? ? ? ? ? ? ? if(top>_itemTop-20){
? ? ? ? ? ? ? ? ? ? currentId = _item.id;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? if(currentId){
? ? ? ? ? ? ? ? //給正確的a加上class
? ? ? ? ? ? ? ? for(var j=0;j<menus.length;j++){
? ? ? ? ? ? ? ? ? ? var _menu = menus[j];
? ? ? ? ? ? ? ? ? ? var _href = _menu.href.split("#");
? ? ? ? ? ? ? ? ? ? console.log(_href);
? ? ? ? ? ? ? ? ? ? if(_href[_href.length-1] != currentId){
? ? ? ? ? ? ? ? ? ? ? ? removeClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? addClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
</head>
<body>
<div id="menu">
<ul>
? ? <li><a href="#item1" class="current">1F 男裝</a></li>
? ? ? ? <li><a href="#item2">2F 女裝</a></li>
? ? ? ? <li><a href="#item3">3F 美妝</a></li>
? ? ? ? <li><a href="#item4">4F 禮服</a></li>
? ? ? ? <li><a href="#item5">5F 數(shù)碼</a></li>
? ? ? ? <li><a href="#item6">6F 母嬰</a></li>
? ? ? ? <li><a href="#item7">7F 海外</a></li>
? ? </ul>
</div>
<div id="content">
<h2>購物網(wǎng)</h2>
? ? <div id="item1" class="item">
? ? <h3>1F 男裝</h3>
? ? </div>
? ? <div id="item2" class="item">
? ? <h3>2F 女裝</h3>
? ? </div>
? ? <div id="item3" class="item">
? ? <h3>3F 美妝</h3>
? ? </div>
? ? <div id="item4" class="item">
? ? <h3>4F 禮服</h3>
? ? </div>
? ? <div id="item5" class="item">
? ? <h3>5F 數(shù)碼</h3>
? ? </div>
? ? <div id="item6" class="item">
? ? <h3>6F 母嬰</h3>
? ? </div>
? ? <div id="item7" class="item">
? ? <h3>7F 海外</h3>
? ? </div>
</div>
</body>
</html>
2015-02-28
最好是上代碼
另外,js獲取ID的方法是都兼容的,除非你頁面上有多個(gè)ID,導(dǎo)致獲取到的不對(duì)