js或jQuery修改樣式

今天面試(有筆試題的那種)鞭光;題目倒是不難但我發(fā)現(xiàn)React用久了樣式都不會修改了胯陋,jQuery之前就沒有過多研究的情況下竭恬,再加上是手寫代碼脉顿;結(jié)果悲劇了_ + _---還是基本功不夠扎實卜朗,不過發(fā)現(xiàn)手寫代碼也是一種不錯的梳理知識點的方式拔第;
正題:用jQuery或js改變div 下指定類名的樣式;
下面進入貼代碼時間场钉;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../libStudy/com-lib/jquery-2.2.2.js"></script>
    <link href="../../cssDemo/base/base.css" rel="stylesheet"/>
    <style>
        .bg div{
            height: 200px;
            width: 100%;
            border: 1px solid green;
        }
    </style>
</head>
<script>
    $(function () {
//      錯誤的對div修改樣式$(".col").attr("height","20px");div沒有只帶height,width 屬性蚊俺;所以修改無效;而img可以
//       文檔參考html標簽 http://www.w3school.com.cn/tags/tag_div.asp
//      方式一:
        $(".col").attr("style","height: 20px");
//      Jquery內(nèi)部會執(zhí)行如下操作逛万;
        $(".col").each(function (index,ele) {
            $(ele).attr("style","height: 20px");
        });

//      原生js方法泳猬;
        var a=document.getElementsByClassName("col");
//        返回的是一個偽集合,通過Array中的slice方法轉(zhuǎn)化下即可宇植;
        Array.prototype.slice.call(a).forEach(function (ele,index) {
            ele.style.height="60px";
        });
//Es6的轉(zhuǎn)化數(shù)組方式為
        Array.from(a).forEach(function (ele,index) {
            ele.style.height="260px";
        });
//      forEach和map 的區(qū)別就是forEach沒有返回值得封,而map有返回值;

        for(var i=0;i<a.length;i++){
            a[i].style.height="160px";
        }
//      jQuery對所有div 且類名為col的元素綁定一個click 事件指郁;
        $("div[class='col']").click(function () {
            alert(this.innerHTML)
        })
    })
</script>
<body class="bg">
   <div class="col" id="one">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
   <div class="col">4</div>
   <div class="colNoClick">4</div>
   <div class="col">5</div>
</body>
</html>

不多說 好好學習天天向上嘍-

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忙上,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子坡氯,更是在濱河造成了極大的恐慌晨横,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件箫柳,死亡現(xiàn)場離奇詭異手形,居然都是意外死亡,警方通過查閱死者的電腦和手機悯恍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3 395
  • 文/潘曉璐 我一進店門库糠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人涮毫,你說我怎么就攤上這事瞬欧。” “怎么了罢防?”我有些...
    開封第一講書人閱讀 165,083評論 0 355
  • 文/不壞的土叔 我叫張陵艘虎,是天一觀的道長。 經(jīng)常有香客問我咒吐,道長野建,這世上最難降的妖魔是什么属划? 我笑而不...
    開封第一講書人閱讀 58,763評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮候生,結(jié)果婚禮上同眯,老公的妹妹穿的比我還像新娘。我一直安慰自己唯鸭,他們只是感情好须蜗,可當我...
    茶點故事閱讀 67,785評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著目溉,像睡著了一般明肮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上停做,一...
    開封第一講書人閱讀 51,624評論 1 305
  • 那天晤愧,我揣著相機與錄音大莫,去河邊找鬼蛉腌。 笑死,一個胖子當著我的面吹牛只厘,可吹牛的內(nèi)容都是我干的烙丛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,358評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼羔味,長吁一口氣:“原來是場噩夢啊……” “哼河咽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起赋元,我...
    開封第一講書人閱讀 39,261評論 0 276
  • 序言:老撾萬榮一對情侶失蹤忘蟹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后搁凸,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體媚值,經(jīng)...
    沈念sama閱讀 45,722評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年护糖,在試婚紗的時候發(fā)現(xiàn)自己被綠了褥芒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,030評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡嫡良,死狀恐怖锰扶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情寝受,我是刑警寧澤坷牛,帶...
    沈念sama閱讀 35,737評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站很澄,受9級特大地震影響京闰,放射性物質(zhì)發(fā)生泄漏锨亏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,360評論 3 330
  • 文/蒙蒙 一忙干、第九天 我趴在偏房一處隱蔽的房頂上張望器予。 院中可真熱鬧,春花似錦捐迫、人聲如沸乾翔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽反浓。三九已至,卻和暖如春赞哗,著一層夾襖步出監(jiān)牢的瞬間雷则,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1 270
  • 我被黑心中介騙來泰國打工肪笋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留月劈,地道東北人。 一個月前我還...
    沈念sama閱讀 48,237評論 3 371
  • 正文 我出身青樓藤乙,卻偏偏與公主長得像猜揪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子坛梁,可洞房花燭夜當晚...
    茶點故事閱讀 44,976評論 2 355

推薦閱讀更多精彩內(nèi)容