codecamp

W3.JS 介绍

HTML 幻灯片

实例

<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>

尝试一下 »

在 HTML 中显示数据

实例

<script>w3.displayObject("id01", myObject);</script>


尝试一下 »

HTML元素排列

Click on the table headers to sort the table accordingly:

实例

<table id="myTable">
  <tr>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">Name</th>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
  </tr>
</table>

尝试一下 »

筛选HTML元素

实例

<input oninput="w3.filterHTML('#id01', 'li', this.value)">

尝试一下 »

    隐藏和显示 HTML 元素

    实例

    <p><button onclick="w3.hide('.city')">隐藏</button></p>

    <p><button onclick="w3.show('.city')">显示</button></p>

    <button onclick="w3.toggleShow('.city')">Toggle Hide/Show</button>

    尝试一下 »

    添加HTML元素样式

    实例

    <p><button onclick="w3.addStyle('#London','background-color','red')">添加样式</button> </p>


    尝试一下 »

    切换HTML元素的类

    实例

    <button onclick="w3.addClass('#London','marked')">添加类</button>

    <button onclick="w3.removeClass('#London','marked')">删除类</button>

    <button onclick="w3.toggleClass('#London','marked')">切换类</button>


    尝试一下 »


    W3.JS 选择器
    温馨提示
    下载编程狮App,免费阅读超1000+编程语言教程
    取消
    确定
    目录

    关闭

    MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }