{"id":219,"date":"2024-09-22T13:22:28","date_gmt":"2024-09-22T05:22:28","guid":{"rendered":"\/?p=219"},"modified":"2025-09-26T23:08:47","modified_gmt":"2025-09-26T15:08:47","slug":"javascript","status":"publish","type":"post","link":"\/?p=219","title":{"rendered":"JavaScript"},"content":{"rendered":"\n

Document\u5bf9\u8c61<\/h3>\n\n\n\n

https:\/\/www.runoob.com\/jsref\/dom-obj-document.html<\/a><\/p>\n\n\n\n

\u8868\u5355\u63d0\u4ea4<\/h3>\n\n\n\n
function login(event){\n    event.preventDefault();\/\/\u963b\u6b62\u63d0\u4ea4\n    var form = document.getElementById(\"loginform\");\/\/\u83b7\u53d6form\n    var formdata = new FormData(form);\/\/\u53d8\u6210\u4e00\u4e2a\u952e\u503c\u65b9\u4fbf\u6253\u5305\u4e0a\u4f20\n    var data = formdata.entries();\/\/\u6570\u636e\u5728entries\u4e2d\n\/\/\u904d\u5386\u6570\u7ec4\n    for(const itser of data){\n        console.log(itser);\n    }\n}<\/code><\/pre>\n\n\n\n
fetch\u8bf7\u6c42<\/h3>\n\n\n\n
    var url='sight.php'\/\/\u6307\u5b9a\u5730\u5740\n    \/\/fetch(url,body).then(response=>function(){}).cath(error=>\u6355\u83b7\u62a5\u9519)\n    fetch(url,{\n        method : \"post\",\n        body : formdata\n    }).then(response =>console.log(response.json()))\n    .catch(error =>{\n        console.log(error)\n    });<\/code><\/pre>\n\n\n\n
\u5355\u9875\u9762\u5bfc\u822a\u680f\u5185\u5bb9\u5207\u6362<\/h3>\n\n\n\n
document.addEventListener('DOMContentLoaded',function(){\n\/\/\u76d1\u542c\u7b49\u5f85DOM\u52a0\u8f7d\u5b8c\u6210\n    const navlisten = document.getElementsByClassName('nv');\n\/\/\u627env\u7c7b\n    const valuelisten = document.getElementsByClassName('value');\n\/\/\u627evalue\u7c7b\n\/\/\u5faa\u73af\u904d\u5386nv\u7c7b\u5e76\u76d1\u542cnv\u7c7b\u4e2d\u7684\u70b9\u51fb\u4e8b\u4ef6\n    for(i=0 ;i<navlisten.length;i++){\n       const link =  navlisten[i];\n       link.addEventListener('click',function(){\n            const v_num = link.getAttribute('data-value-click');\n\/\/\u83b7\u53d6data-value-click\u4e2d\u7684data\u6570\u636e\n            for(x=0;x<valuelisten.length;x++){\n                const vlink = valuelisten[x];\n                vlink.classList.remove('active');\n            }\n\/\/\u5217\u51fa\u6bcf\u4e2avalue\u7c7b\u4e2d\u7684\u6240\u6709\u7c7b\u5e76\u4ece\u4e2d\u79fb\u9664active\u7c7b\n            const getvalueId = document.getElementById(v_num);\n\/\/\u83b7\u53d6v_num\u7684id element\n            getvalueId.classList.add('active');\n\/\/\u6dfb\u52a0active\u7c7b\n       })\n    }\n})<\/code><\/pre>\n\n\n\n
\u65f6\u95f4\u51fd\u6570-2s\u5207\u6362\u6807\u9898<\/h3>\n\n\n\n
<script>\n    let time = setInterval(ChangeTitle,2000);\n\/\/\u521b\u5efa\u8ba1\u65f6\u4e8b\u4ef62s\u6267\u884c\u51fd\u6570\n    let cg = true\n    function ChangeTitle(){\n        cg = !cg;\n        let GetTitle = document.getElementById('ct');\n        if(cg){\n            GetTitle.text = '\u2605\u2606\u7f8e\u4e3d\u8bf4\uff0c\u53d1\u73b0\u7f8e\u2605\u2606'\n        }\n        else{\n            GetTitle.text = '\u2606\u2605\u7f8e\u4e3d\u8bf4\uff0c\u5206\u4eab\u7f8e\u2606\u2605'\n        }\n    }\n\n<\/script><\/code><\/pre>\n\n\n\n
\u66f4\u6539css-:root\u4e2d\u7684\u53d8\u91cf\u5b9e\u73b0\u5f69\u8272\u5b57<\/h3>\n\n\n\n
css<\/p>\n\n\n\n
:root{\n    \/* \u6e10\u53d8\u5b57 *\/\n    --mian-h1-color:red;\n}\n\n\nbody{\n    text-align: center;\n\n}\n.butifultext{\n    color:var(--mian-h1-color);\n    transition: color 2s;\n}<\/code><\/pre>\n\n\n\n
JavaScript<\/p>\n\n\n\n
async function butiftext() {\n    let root = document.documentElement;\/\/\u83b7\u53d6\u6839\u8def\u5f84\n    root.style.setProperty('--mian-h1-color', 'green');\/\/\u4fee\u6539:root\u4e2d\u7684\u53d8\u91cf\u503c\n    let bgColor = getComputedStyle(root).getPropertyValue('--mian-h1-color');\/\/\u83b7\u53d6:root\u4e2d\u7684\u53d8\u91cf\u503c\n    console.log(bgColor);<\/code><\/pre>\n\n\n\n
\u76d1\u542c\u7a97\u53e3\u521d\u59cb\u5316<\/h3>\n\n\n\n
window.onload = function()<\/code><\/pre>\n\n\n\n
\u76d1\u542c\u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u6216\u8005\u52a0\u8f7d\u5931\u8d25<\/h3>\n\n\n\n
            img.addEventListener('load',function haveload(){\n                img.removeEventListener('load', haveload);\n            })\n            img.addEventListener('error',function erros(){\n                img.src = 'img\/404.png'\n                img.removeEventListener('load',erros)<\/code><\/pre>\n\n\n\n
\u521b\u5efa\u5404\u79cd\u5c5e\u6027<\/h3>\n\n\n\n
    const a = document.createElement('div')\n    const b = document.createElement('a')\n    const c = document.createElement('img')\n    a.className = 'pick-box'\n    b.appendChild(c)\n    a.appendChild(b)\n    box.appendChild(a)<\/code><\/pre>\n\n\n\n
\u5f02\u6b65\u51fd\u6570<\/h3>\n\n\n\n
async function(){\n    await xxxx\n}<\/code><\/pre>\n\n\n\n
\u5f02\u5e38\u68c0\u6d4b<\/h3>\n\n\n\n
try {\n    tryCode - \u5c1d\u8bd5\u6267\u884c\u4ee3\u7801\u5757\n}\ncatch(err) {\n    catchCode - \u6355\u83b7\u9519\u8bef\u7684\u4ee3\u7801\u5757\n}\nfinally {\n    finallyCode - \u65e0\u8bba try \/ catch \u7ed3\u679c\u5982\u4f55\u90fd\u4f1a\u6267\u884c\u7684\u4ee3\u7801\u5757\n}<\/code><\/pre>\n\n\n\n
\u68c0\u6d4b\u662f\u5426\u89e6\u5e95<\/h3>\n\n\n\n
window.addEventListener('scroll',()=>{\n    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;\n    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;\n    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;\n  \n    if (scrollHeight - 10 <= scrollTop + clientHeight){\n\n  }<\/code><\/pre>\n\n\n\n
\u68c0\u6d4b\u662f\u5426\u5b58\u5728\u67d0\u4e00\u4e2a\u7c7b<\/h3>\n\n\n\n
if(!(data.classList.contains(\"loadover\"))){\n     data.classList.add(\"loadover\")\n}<\/code><\/pre>\n\n\n\n
\u68c0\u6d4b\u662f\u5426\u88ab\u70b9\u51fb<\/h3>\n\n\n\n
const Getlg = document.getElementsByClassName('lg');\nconst Getre = document.getElementsByClassName('re');\n\nfunction Change_re_lg(){\n    console.log('ok');\n\n}\n\nfunction re(){\n\n}\n\nfunction lg(){\n\n}\n\nGetlg[0].onclick = function(){\n    Change_re_lg();\n}<\/code><\/pre>\n\n\n\n
\u68c0\u6d4b\u7a97\u53e3\u6eda\u52a8<\/h3>\n\n\n\n
window.addEventListener('scroll',function (){\n    const header = this.document.querySelector('.navigation');\n    if(window.scrollY>20)\n        header.id = 'navbar';\n    else\n        header.id = '';\n})\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Document\u5bf9\u8c61 https:\/\/www.runoob.com\/jsref\/dom-obj-documen […]<\/p>\n","protected":false},"author":1,"featured_media":242,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[25],"class_list":["post-219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts\/219"}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=219"}],"version-history":[{"count":13,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/219\/revisions"}],"predecessor-version":[{"id":902,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/219\/revisions\/902"}],"wp:featuredmedia":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/media\/242"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=219"},{"taxonomy":"post_tag","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}