1. 程式人生 > >通過js修改html的標籤屬性

通過js修改html的標籤屬性

      在開發一個詳情頁面時,通過呼叫iOS的UIWebView進行內容展示,本來很順利的事情,卻因為Safari的問題,有的頁面圖片載入不出來,甚是鬱悶。於是把一個能載入圖片的html原始碼和一個不能載入圖片的html原始碼進行分析對比,發現是img標籤裡面多了一個data-src屬性。

     百度了一下data-src,找到相關資訊:

追過html5.
剛剛查資料看了一下
Sets or retrieves the identifier of the data source that is bound to the element.In HTML, only Internet Explorer supports table creation dynamically from XML. If you want to implement similar functionality in other browsers, you need to use JavaScript. For further details, see the page for the XMLHttpRequest object.


大體的意思是:
設定或檢索資料來源繫結到元素的識別符號。
我查看了好幾個例子,主要的應用是在延遲載入,把圖片延遲載入,當瀏覽到的時候讀取data-src,然後他就自動引導到src這個屬性,可能說的不太正確,大體是這個意思。但是你要明確圖片路徑時還是用src而不是data-src

      反正不管是什麼原因,先把它去掉試試,剛開始想到的是用匹配的方法,直接替換掉,這是比較熟悉的方式。但是一想到要對一大段的html慢慢算NSRange,就犯難了。於是想到用第三方庫,把節點都提取出來,就不用自己慢慢精確地計算位置了。但回頭一想,為這麼個小問題,加個庫不值當啊,就想到了js。在剛開始寫js的時候,因為都沒寫過,也不太會除錯方法,搞了很久,都沒什麼效果,而且還用了jQ裡面的設定屬性的方法,而我只能在客戶端加一段js,沒有jQ環境,最終只能作罷,還是用老方法吧,難是難點,但是能解決燃眉之急。

於是有了以下程式碼:

NSString *searchText = [NSMutableString stringWithString:html];
    
    NSError *error;
    NSString *regulaStr = @"<img[^>]+>";
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:regulaStr
                                                                           options:NSRegularExpressionCaseInsensitive
                                                                             error:&error];
    NSArray *arrayOfAllMatches = [regex matchesInString:searchText options:0 range:NSMakeRange(0, [searchText length])];
    
    NSMutableArray *exchangeStrArr = [NSMutableArray array];
    for (NSTextCheckingResult *match in arrayOfAllMatches)
    {
        NSString* substringForMatch = [searchText substringWithRange:match.range];
        
        NSRange subRange = [substringForMatch rangeOfString:@"src=\"?(.*?)(\"|>|\\s+)" options:NSRegularExpressionSearch];
        NSString *resultStr = @"";
        if (subRange.location != NSNotFound) {
            NSString *src = [substringForMatch substringWithRange:subRange];
            resultStr = [NSString stringWithFormat:@"<img style=\"box-sizing: border-box; width: 100%%; height: auto !important;\" %@ />", src];
        }
        NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:substringForMatch, @"original", resultStr, @"new", nil];
        [exchangeStrArr addObject:dic];
    }
    
    for (int i=0; i<exchangeStrArr.count; i++) {
        NSDictionary *item = [exchangeStrArr objectAtIndex:i];
        NSString *original = [item objectForKey:@"original"];
        NSString *new = [item objectForKey:@"new"];
        searchText = [searchText stringByReplacingOccurrencesOfString:original withString:new];
    }
    
    webview.html = searchText;

這一看就不甚優雅啊。但是專案能上傳了。。。

第二天,趕完項止睡飽覺,就考慮做得優雅一點了,畢竟這是程式設計師的一大追求。因為前一天坑了那麼久,而且也睡夠了,靈感爆發,用web檢查器檢查js處理後的html元素時發現這個圖片是因為src這個屬性值在Safari打不開圖片,而data-src的值卻是能開啟的,於是一下就做出來了,於是有了以下程式碼:

 var items = document.getElementsByTagName("img");
 for(var i = 0;i<items.length;i++){
   var imgDataSrc = items[i].getAttribute('data-src');
   if (imgDataSrc) {
     items[i].setAttribute('src', imgDataSrc);
     items[i].removeAttribute('data-src');
   };
 }

但再想深一層,這段程式碼還是太粗暴了點,能不能溫柔點呢?百度一下『js判斷圖片是否存在』,發現還真有onerror這個屬性,是在圖片載入不出來時的執行內容,於是寫了以下程式碼:

var items = document.getElementsByTagName("img");
for(var i = 0;i<items.length;i++){
  items[i].setAttribute('onerror', 'javascript:var imgDataSrc = this.getAttribute(\'data-src\'); if (imgDataSrc) {this.setAttribute(\'src\', imgDataSrc);this.removeAttribute(\'data-src\')};');
}

恩,到這裡對一些正常顯示的網頁影響就更小了,到此為止,是我想到的比較好的解決方式,如果看到的網友有更好的想法,請不吝指教!

最後的結果就是以下,用NSString方法在html上加入一段js

html = [html stringByAppendingString:@"<script>\
            var items = document.getElementsByTagName(\"img\");\
            for(var i = 0;i<items.length;i++){\
                items[i].setAttribute('onerror', 'javascript:var imgDataSrc = this.getAttribute(\\'data-src\\'); if (imgDataSrc) {this.setAttribute(\\'src\\', imgDataSrc);this.removeAttribute(\\'data-src\\')};');\
            }\
            </script>"];
  
<head>
    <meta name="viewport" content="width=300.000000,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <style type="text/css">
      body {font-family: "黑體"; font-size: 14px;padding:0px;margin:0px;} p{font-size:14px;line-height:
      1.5em;} img{ width:300.000000;margin:0;padding:0;} span{font-size:14px;}
    </style>
  </head>
  
  <body>
    <div id="webview_content_wrapper">
      <p style="white-space: normal;">
        <span style="font-size: 14px; line-height: 1.5em;">
          魔都的夜生活從來都不乏味,哪個場子都能聞到動物派對出沒的味道,菸酒味、香水味,都是捕獵的訊號,沒有多少年輕人願意數著腳趾眼巴巴地獨自到天亮。
        </span>
        <br/>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          直到躁來躁去好像都是一樣的勁兒,舞池裡新鮮的只有姑娘身上從不重樣的衣服,瘋狂的舞步跳到熟悉,好像缺了些刺激。
          <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
          />
        </span>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          如果你還對「新鮮」依舊敏感,我們給你準備了一個充滿無限可能的派對。上海的夜晚經得起一鬧再鬧,歡迎各種味道。當然,少不了你的份。
        </span>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          <br/>
        </span>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          <br/>
        </span>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          Stage+ Launch Party | Shanghai 上海站&nbsp;
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          時間&nbsp;Data:2016.3.30 &nbsp;週三21:00~深夜 &nbsp;
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          地點&nbsp;Address:上海 Arkham 徐彙區烏魯木齊南路1號&nbsp;
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;No.1&nbsp;South&nbsp;Wulumuqi &nbsp;Road,
          Shanghai
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          票價&nbsp;Price:¥100
        </strong>
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          陣容介紹
          <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
          />
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          DJ Lineup
        </strong>
      </p>
      <p style="white-space: normal;">
        <strong>
          <br/>
        </strong>
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          Jack Beats&nbsp;
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          兩個世界冠軍對你的耳膜進行碾壓
        </strong>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; text-align: center;">
        <img data-s="300,640" data-type="jpeg" data-ratio="1" data-w="" width="auto"
        data-src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxLicV9iah30Jo8ST92icyWG5bZXFvy9he8iaxTPSNrWK0RwWAORsx5w0EQnQ7cXEbF9OypTWafwDm0zcKA/640?wx_fmt=jpeg"
        _width="auto" src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxLicV9iah30Jo8ST92icyWG5bZXFvy9he8iaxTPSNrWK0RwWAORsx5w0EQnQ7cXEbF9OypTWafwDm0zcKA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"
        style="margin: 0px; padding: 0px; max-width: 100%; height: auto !important; box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;"
        />
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p>
      </p>
      <section style="white-space: normal;">
        <section>
          <section>
            <section>
              <section>
                <section>
                  <section>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        來自倫敦的Jack Beats是一個擁有瘋狂歷史的老練組合。這個二人組由Scratch Perverts的DJ Plus One和Mixologists的Beni
                        G組成,Plus One在他20歲的時候擊敗了Kentaro和Klever這樣強勁的對手從而成為英國1989以來第一位DMC世界冠軍。Beni
                        G也是前DMC &amp; ITF DJ冠軍和兩屆城市音樂獎的得主。
                      </span>
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        Jack Beats作為兩人的合作專案,將重心更多的放在製作領域。音樂型別上也大步跨越,吸收Electro, Hip-hop, Drum n
                        bass, Dubstep等等音樂元素,時髦混搭出極具前瞻性與煽動力的舞池炸彈。
                      </span>
                    </p>
                    <p>
                      <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
                      />
                    </p>
                    <p>
                      <br/>
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        After almost a decade together, Niall Dailly and Ben Geffin’s mission
                        statement remain slargely the same as it did since they combined forces
                        in 2007 to be on the front line of inventive, forward thinking house music.&nbsp;
                      </span>
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        While Jack Beats’sound is hard to pin down, it is one that was initially
                        heavily influenced by their hometown of London. The duo’s output is a reflection
                        of their love of hybrid music, and wide-ranging influences from hip-hop
                        to house to drum ‘n’bass.
                      </span>
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        Over the past few years, Jack Beats have managed to amass a dedicated
                        international following of their thunderous bass-heavy approach to house
                        music, aided by a string of monstrous remixes for the likes of Beyonce,
                        Major Lazer, Florence &amp; The Machine,&nbsp;Diploand Rudimental. Renowned
                        as world-class DJs, Jack Beats have graced many&nbsp;of the world’s most
                        important DJ booths and festivals including Coachella, Fuji Rocks,Glastonbury,
                        EDC and Sonar, as well as having released on labels such as OWSLA,Rinse,
                        Nightbass and Columbia.
                      </span>
                    </p>
                  </section>
                </section>
              </section>
            </section>
          </section>
        </section>
      </section>
      <p>
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          3ASiC
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          他五年級時就拿到了國家計算機二級(VB)的證書
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        &nbsp;
        <img data-s="300,640" data-type="jpeg" data-ratio="1" data-w="" data-src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxL8g4knJHibnygaChgr1kbkhy1gctLqrGbRVbFPBJj9sZlSUpYF9oDIDqpp9RsGvAW5detE7jrRJbHQ/640?wx_fmt=jpeg"
        _width="auto" src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxL8g4knJHibnygaChgr1kbkhy1gctLqrGbRVbFPBJj9sZlSUpYF9oDIDqpp9RsGvAW5detE7jrRJbHQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"
        style="margin: 0px; padding: 0px; max-width: 100%; height: auto !important; box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;"
        />
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p>
      </p>
      <section style="white-space: normal;">
        <section>
          <section>
            <section>
              <section>
                <section>
                  <section>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        伍子軒(3ASiC ),2014年以優秀的專業成績畢業於南京藝術學院傳媒學院錄音系,現任知乎日報電子音樂專欄編輯。他是來自南京的DJ、音樂製作人,同步計劃電子音樂廠牌主理人,國內低音音樂與電子舞曲代表人物之一。已在iTunes、Beatport等國外各大音樂售賣網站發行多首單曲以及兩張EP,目前主要致力於低音音樂的製作,這個國內新生代的電子音樂製作人將會跟隨著週三巡演的腳步,在上海成都和廣州都能看到他的身影。
                      </span>
                    </p>
                    <p>
                      <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
                      />
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        3ASiC, a DJ/Producer from Nanjing, also a co-founder and manager of Project
                        Sync Records, is a risingstar of Chinese bass music scene. He has released
                        several singles and EPs on online stores includingi Tunes and Beatport.
                      </span>
                    </p>
                    <p style="line-height: 1.5em;">
                      <span style="font-size: 14px;">
                        3ASiC is a professional music producer and sound engineer, who has a unique
                        and thorough conceptfor sound design and producing, which can be easily
                        seen from his live performances. Meanwhile, 3ASiC as the core leader of
                        Project Sync Records, has been leading a group of brilliant producers in
                        China andconstantly releasing excellent works on Project Sync label. Lately
                        3ASiC was also elected as the chiefeditor of Zhihu Daily music section,
                        aiming to boost the development of electronic music industry within China.
                      </span>
                    </p>
                  </section>
                </section>
              </section>
            </section>
          </section>
        </section>
      </section>
      <p>
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          DJ [email protected]&nbsp;
        </strong>
      </p>
      <p style="white-space: normal; text-align: center;">
        <strong>
          南非駐中國電音大使
        </strong>
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal; text-align: center;">
        <img data-s="300,640" data-type="jpeg" data-ratio="1.5" data-w="360" width="auto"
        data-src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxLicV9iah30Jo8ST92icyWG5bZXjpxV9cU3ETB5bnpD6cZXw2cDjj4r5tKODIKDbERAPhuysiafMk3LSQg/640?wx_fmt=jpeg"
        _width="auto" src="http://mmbiz.qpic.cn/mmbiz/NZ8IXO0DxLicV9iah30Jo8ST92icyWG5bZXjpxV9cU3ETB5bnpD6cZXw2cDjj4r5tKODIKDbERAPhuysiafMk3LSQg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"
        style="margin: 0px; padding: 0px; max-width: 100%; height: auto !important; box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;"
        />
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
        />
      </p>
      <p style="white-space: normal;">
        <br/>
      </p>
      <p>
      </p>
      <section style="white-space: normal;">
        <section>
          <section>
            <section>
              <section>
                <section>
                  <p style="line-height: 1.5em;">
                    <span style="font-size: 14px;">
                      12年的DJ經歷早已使DJ [email protected]成為南非最頂級的DJ之一,頻繁的來往於世界各國送上精彩的DJ現場表演,他的足跡遍佈美國、英國、泰國、中國、澳大利亞、柬埔寨、馬爾地夫、越南與南非。從小型的特色酒吧到大型的國際俱樂部現場、千人組成的盛大gala音樂節現場演出,到國際電臺的混音現場,他都能駕馭的遊刃有餘。2010年他更被南非駐中國上海領事館選為DJ代表,參與2010年上海世博會南非館的音樂演出,曾多次參加中國的迷笛音樂節。
                    </span>
                  </p>
                  <p>
                    <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
                    />
                  </p>
                  <p style="line-height: 1.5em;">
                    <span style="font-size: 14px;">
                      Originally hailing from South Africa, [email protected] has firmly established
                      himself as one of Shanghai&#39;s most in demand party DJs, bringing his
                      flawless turntable skills to over 100 clubs throughout the city. His seamless
                      blending of styles &nbsp;(Hip-Hop, R&amp;B, Funk, Trap, Twerk, Moombahton,
                      Dancehall, Dubstep, Kwaito) and his personality in the DJ booth has earned
                      him spots at major local and international festivals, and also made him
                      a favourite on the airwaves all over the world.
                      <br style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"
                      />
                      He even uses his skills for charity work with his MAD (Making A Difference)
                      endeavours as part of his [email protected] Entertainment brand.
                    </span>
                  </p>
                  <p>
                    <br/>
                  </p>
                  <p>
                    <br/>
                  </p>
                </section>
              </section>
            </section>
          </section>
        </section>
      </section>
      <p>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          有一種奇葩的病叫ADD,
        </span>
      </p>
        <strong>
          <span style="font-size: 14px;">
            病徵為大部分時間精神渙散,
          </span>
        </strong>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <strong>
          <span style="font-size: 14px;">
      <p style="white-space: normal; line-height: 1.5em;">
            全名為Attention Deficit Disorder(注意力不足過動症),
          </span>
        </strong>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
            極個別時間精神超長集中,
        <strong>
          <span style="font-size: 14px;">
          </span>
        </strong>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          ADD晚期患者,不單是你,也加我一個,音樂是你我的良藥。
        </span>
      </p>
      <p style="white-space: normal; line-height: 1.5em;">
        <span style="font-size: 14px;">
          一大波搭救ADD患者的音樂派對正奔赴路上,這是病,得治!
        </span>
      </p>
    </div>
    <div id="bottom_holder">
    </div>
  </body>

</html>

<script>
//方法1:適應性更強
var items = document.getElementsByTagName("img");
for(var i = 0;i<items.length;i++){
  items[i].setAttribute('onerror', 'javascript:var imgDataSrc = this.getAttribute(\'data-src\'); if (imgDataSrc) {this.setAttribute(\'src\', imgDataSrc);this.removeAttribute(\'data-src\')};');
}

//方法2
// var items = document.getElementsByTagName("img");
// for(var i = 0;i<items.length;i++){
//   var imgDataSrc = items[i].getAttribute('data-src');
//   if (imgDataSrc) {
//     items[i].setAttribute('src', imgDataSrc);
//     items[i].removeAttribute('data-src');
//   };
// }
</script>

相關推薦

通過js修改html標籤屬性

      在開發一個詳情頁面時,通過呼叫iOS的UIWebView進行內容展示,本來很順利的事情,卻因為Safari的問題,有的頁面圖片載入不出來,甚是鬱悶。於是把一個能載入圖片的html原始碼和一個不能載入圖片的html原始碼進行分析對比,發現是img標籤裡面多了一個d

JS獲取Html標籤屬性的兩種方法

用JS獲取Html標籤屬性 用JS獲取Html標籤屬性有兩種方法: 如Web開發 JS程式碼: var ka=document.getElementByI d(“link”); alert(ka.getAttribute(“id”)); alert(ka.id)

Js標籤屬性 關於在JS中設定標籤屬性 js和jquery通過this獲取html標籤中的屬性

關於在JS中設定標籤屬性 2017-10-09 23:04 by 清風221, 12790 閱讀, 0 評論, 收藏, 編輯 Attribute 該屬性主要是用來在標籤行內樣式,新增、刪除、獲取屬性。且適用於自定義屬性。

通過js獲取td標籤的text、html、innerhtml三者的區別

注意innerhtml是原生的js的用法。 text、html是jQuery的用法,原生的js語法是沒有text、html這種用法的。 原生的innerhtml = jQuery的html() html()獲取的是id=?的標籤如<td id="test"><a>

通過JSHTML元素增加、刪除和獲取屬性內容

1.通過ID或者其他元素找到要處理的HTML物件:(舉例通過ID) var obj=document.getElementById('id'); 2.操作此物件 新增屬性:obj

通過js修改微信內置瀏覽器title

瀏覽器 document title aid 微信 eat .com none clas document.setTitle = function(t) { document.title = t; var i = document.

js控制html標籤轉換

例如  label標籤設定點選事件 轉換成input 方案:因為不能直接修改標籤名  所以換種思路, 新建個標籤, 原標籤屬性值賦值給新標籤, 移除原標籤, 加上新標籤 核心程式碼1 複製: var old = docume

HTML標籤屬性主體結構

什麼是HTML? HTML是用來描述網頁的一種語言 HTML 指的是超文字標記語言: HyperText Markup Language HTML 不是一種程式語言,而是一種標記語言 標記語言是一套標記標籤 (markup tag) HTML 使用標記標籤來描述網頁 HTML 文件包含了HTML 標籤及

在jsp頁面使用JS函式設定標籤屬性

<script type="text/javascript"> function setclass(){ //獲取下拉選單的值,用於判斷 var status1 = $("#sel_fuwu1").find("option:selected").va

QT通過JSHTML的互動

標頭檔案加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS互動原理 QWebEnginePage *page = new QWebEnginePage(this); webView->setPage

QT通過JSHTML的交互

mit 一個 widget web url .get 連接 conn cor 頭文件加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS交互原理 QWebEnginePage *pag

網易webapp 通過js計算html的font-size

設計稿寬度為 750px,取一個100px的font-size為參照,裝置寬度就可以設定為 7.5rem; 計算rem就可以直接除以100,如:100px = 1rem var Dpr = 1, uAgent = window.navigator.userAgent;

jshtml標籤 賦值

<script type="text/javascript">function changeTextArea(){document.getElementById("myTextArea").innerText=document.getElementById("myTextArea").innerT

JSHTML標籤的解耦

           做web開發,經常涉及JS或Jquery操作HTML。作為程式設計師,當然希望程式碼越寫越簡單,越寫越好維護。所以對JS操作HTML的寫法,做如下總結。           1:最初級的寫法:                     這種寫法應該是出現

如何處理HTML標籤屬性

當我們對頁面進行操作的時候,常常需要對HTML標籤屬性(tag attribute)進行處理,這包括獲取某個標籤屬性的值,或者對某個標籤屬性的值進行設定。在jQuery裡我們可以通過.attr()的方法來實現。 1. 獲取標籤屬性的值 (演示) 語法:$('選定目標').attr('屬性名') 例子如下:

TextView新增Html標籤屬性

前言:最近寫一個列表,UI設計的效果是將一串字串分段以不同的字型、顏色、大小顯示到View中,開始想法是這樣,在佈局多開幾個TextView分別設定不同的格式就行了,但是同事說有其他更簡潔的辦法(使用Html標籤)。突然感覺恍然大悟,之前也用過幾次Html標籤,

js去掉html標籤只去文字內容

呼叫repalceHtml即可 function repalceHtml(str){ var dd=str.replace(/<\/?.+?>/g,""); var dds=dd.

vue通過js修改元素的樣式

1 給元素定義ref 屬性 <el-button ref="btnClick" class="list_button" " @click="openClose"></el-button>  2 通過js 方法修改元素的樣式 

通過jshtml動態建立表格

$(function () {$.ajax({type: "POST",    url: "../sys/sysMessage/messageList",    data: "",    success: function(r){    initList(r);    }}

js去掉html標籤和去掉字串文字的所有的空格

    <script>  function delHtmlTag(str){   return str.replace(/<[^>]+>/g,"");//去掉所有的html標記  } var str = "<span style='display:none;'&g