快捷導(dǎo)航

JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例

更新時(shí)間：2017年04月07日 10:47:21 作者：謝玉勝

這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實(shí)例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實(shí)現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法。分享給大家供大家參考，具體如下：

主要思路就是：返回this對(duì)象，將所獲取的操作元素放入一個(gè)數(shù)組中。在原型中添加拓展方法

<html>
<head>
  <title></title>
</head>
<body>
  <div id="one">aa</div>
</body>
<script type="text/javascript">
//封裝類似于JQuery的連綴
/*
思路：一個(gè)操作后再返回本來的對(duì)象this，將獲取的元素放入一個(gè)數(shù)組內(nèi)部。通過原型添加方法;
為了能在原型對(duì)象中添加方法；這個(gè)應(yīng)該用函數(shù)來建立原型對(duì)象
function Base(){
  this.getId=function(id){
    return this;
  }
  使用的時(shí)候，需要new一個(gè)實(shí)例對(duì)象
  var newBase=Base（）；
}
*/
function Base(){
  this.element=[];
  //獲取ID
  this.getId=function(id){
    //將所獲取的元素放入數(shù)組里面，返回當(dāng)前對(duì)象
      this.element.push(document.getElementById(id))
      // return this.element.length
      return this
    }
    //獲取className，遍歷push
    this.getClass=function(name){
      var names=document.getElementsByName(name);
      for( var i=0;i<names.length;i++){
        this.element.push(names[i])
      }
      return this;
    }
    //獲取tagName；遍歷push
    this.getTag=function(tags){
      var tags=document.getElementsByTagName(tags);
      for(var i=0;i<tags.length;i++){
        this.element.push(tags[i])
      }
      return this;
    }
  }
//通過原型添加方法：
Base.prototype.css=function(attr,value){
  //遍歷選取當(dāng)前元素
  for(var i=0;i<this.element.length;i++){
    this.element[i].style[attr]=value;
  }
  return this;
}
var newBase= new Base();
// alert(newBase.getId("one"))
newBase.getId("one").css("background","red").css("color","blue").css("fontSize","60")
</script>
</html>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序如何調(diào)用圖片接口API并居中顯示
這篇文章主要介紹了微信小程序如何調(diào)用圖片接口API并居中顯示,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-06-06
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點(diǎn)對(duì)象寫法，優(yōu)化了些性能。
2008-10-10
webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路
掌握document.getElementById() 根據(jù)id獲取元素,在頁(yè)面畫出一個(gè)寬200 高200 粉色的盒子, 在控制臺(tái)打印這個(gè)盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路,感興趣的朋友一起看看吧
2024-02-02
寫入cookie的JavaScript代碼庫(kù) cookieLibrary.js
cookieLibrary.js 寫入cookie的JavaScript代碼庫(kù),需要的朋友可以參考下。
2009-10-10
JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產(chǎn)品需要設(shè)計(jì)一套相對(duì)完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級(jí)關(guān)系，在表格里面展示層級(jí)關(guān)系，自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下
2017-04-04
Javascript代碼實(shí)現(xiàn)仿實(shí)例化類
這篇文章主要介紹了Javascript代碼實(shí)現(xiàn)仿實(shí)例化類的相關(guān)資料并附上示例，非常不錯(cuò)的文章,需要的朋友可以參考下
2015-04-04
JavaScript DOM節(jié)點(diǎn)操作方式全面講解
DOM（Document Object Model 文檔對(duì)象模型）定義了訪問和操作文檔的標(biāo)準(zhǔn)方法。整個(gè)瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹形結(jié)構(gòu)，這篇文章主要介紹了JavaScript DOM節(jié)點(diǎn)操作方式
2022-10-10
JavaScript中String對(duì)象的使用方法以及實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript中String對(duì)象的使用方法以及實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),方便開發(fā)者在JavaScript開發(fā)中更好地處理字符串,需要的朋友可以參考下
2022-04-04
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
處理Axios返回Promise對(duì)象的幾種常見方式
Axios返回的是Promise對(duì)象,這意味著可以使用Promise的.then()、.catch()和.finally()方法來處理異步操作的結(jié)果,本文詳細(xì)介紹了處理Axios返回Promise對(duì)象的幾種常見方式,需要的朋友可以參考下
2024-09-09