{"id":1718,"date":"2020-01-18T22:38:12","date_gmt":"2020-01-18T14:38:12","guid":{"rendered":"http:\/\/www.imzouyang.com\/blog\/?p=1718"},"modified":"2020-10-28T22:46:47","modified_gmt":"2020-10-28T14:46:47","slug":"html5-%e9%80%9a%e8%bf%87classlist%e8%8e%b7%e5%8f%96html%e5%85%83%e7%b4%a0%e7%9a%84%e6%89%80%e6%9c%89class%e5%90%8d","status":"publish","type":"post","link":"http:\/\/www.imzouyang.com\/blog\/archives\/1718.html","title":{"rendered":"HTML5-\u901a\u8fc7classList\u83b7\u53d6html\u5143\u7d20\u7684\u6240\u6709class\u540d"},"content":{"rendered":"\n<p>HTML5 \u6709\u4e2a\u65b0\u5c5e\u6027\uff1aclassList\u5c5e\u6027\uff0c\u5b83\u53ef\u4ee5\u5f39\u51fa\u6240\u6709\u7684class\u540d\u79f0\u3002classList\u662f\u4e00\u4e2a\u7c7b\u6570\u7ec4\u7684\u5bf9\u8c61\u3002\u4e0b\u4f8b\u662f\u6253\u5370 div \u7684 class \u7684\u503c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;script>\n        window.onload = function(){\n            var oDiv = document.getElementById(\"box\");\n            console.log(oDiv.classList);\n        }\n    &lt;\/script>\n\n    \u2026\u2026\n \n    &lt;div id=\"box\" class=\"box1 box2 box3\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u53e6\u5916\uff0cclassList \u4e0b\u9762\u8fd8\u6709\u51e0\u4e2a\u65b9\u6cd5\u4e0e\u5c5e\u6027\uff1a<\/p>\n\n\n\n<ul><li>length\uff1aclass \u7684\u957f\u5ea6\uff0c\u4e0a\u4f8b\u6267\u884c console.log(oDiv.classList.length); \u5219\u4f1a\u6253\u5370\u51fa3<\/li><li>add()\uff1a\u6dfb\u52a0 class\uff0c\u4e0a\u4f8b\u6267\u884c oDiv.classList.add(&#8220;box4&#8221;); \u5373\u53ef\u6dfb\u52a0\u4e00\u4e2a box4 \u7684class\u540d\u8fdb\u53bb<\/li><li>remove()\uff1a\u5220\u9664 class \u7684\u65b9\u6cd5\uff0c\u4e0a\u4f8b\u6267\u884c oDiv.classList.remove(&#8220;box2&#8221;); \u5219\u4f1a\u5220\u9664 box2 \u8fd9\u4e2aclass\u540d<\/li><li>toggle()\uff1a\u5207\u6362 class\uff0c\u4e0a\u4f8b\u5982\u679c\u6267\u884c\u4e00\u6b21 oDiv.classList.toggle(&#8220;box4&#8221;); \u5219\u4f1a\u6dfb\u52a0\u4e00\u4e2a box4 \u7684 class\u540d\u8fdb\u53bb\uff0c\u5982\u679c\u518d\u6267\u884c\u4e00\u6b21 oDiv.classList.toggle(&#8220;box4&#8221;); \u5219\u4f1a\u5220\u9664\u521a\u521a\u6dfb\u52a0\u7684 box4\u3002\u5b83\u7684\u610f\u601d\u5c31\u662f \u5982\u679c toggle \u4f20\u5165\u7684 class \u540d\uff0c\u5728\u539f\u6765\u7684class \u5185\u5b58\u5728\uff0c\u5219\u662f\u6267\u884c\u5220\u9664\u64cd\u4f5c\uff0c\u5982\u679c\u4e0d\u5b58\u5728\uff0c\u5219\u662f\u4ece\u672b\u5c3e\u6dfb\u52a0\u8fdb\u53bb class \u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>            oDiv.classList.toggle(\"box4\"); \/\/\u6dfb\u52a0\u4e0a box4 \u8fd9\u4e2a class\n            console.log(oDiv.classList);\n            oDiv.classList.toggle(\"box4\"); \/\/\u518d\u6b21\u6267\u884c\u4f1a\u5220\u9664 box4 \u8fd9\u4e2a class\n            console.log(oDiv.classList);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 \u6709\u4e2a\u65b0\u5c5e\u6027\uff1aclassList\u5c5e\u6027\uff0c\u5b83\u53ef\u4ee5\u5f39\u51fa\u6240\u6709\u7684class\u540d\u79f0\u3002classList\u662f\u4e00\u4e2a\u7c7b\u6570\u7ec4 &hellip; <a href=\"http:\/\/www.imzouyang.com\/blog\/archives\/1718.html\" class=\"read-more\">\u7ee7\u7eed\u9605\u8bfb <span class=\"screen-reader-text sr-only\">HTML5-\u901a\u8fc7classList\u83b7\u53d6html\u5143\u7d20\u7684\u6240\u6709class\u540d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"aside","meta":[],"categories":[30],"tags":[],"_links":{"self":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/1718"}],"collection":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/comments?post=1718"}],"version-history":[{"count":5,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/1718\/revisions"}],"predecessor-version":[{"id":1728,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/1718\/revisions\/1728"}],"wp:attachment":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/media?parent=1718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/categories?post=1718"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/tags?post=1718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}