ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript でのalert() メソッドの書き換え手法の分析に焦点を当てます。

JavaScript でのalert() メソッドの書き換え手法の分析に焦点を当てます。

亚连
亚连オリジナル
2018-05-17 10:02:282460ブラウズ

JavaScript でのalert() メソッドの書き換えテクニックの分析に焦点を当てます

window.alert = function(str) {  
    var alertBox = document.createElement("div");  
    alertBox.id="alertBox";  
    alertBox.style.position = "absolute";  
    alertBox.style.width = "400px";  
    alertBox.style.background = "#F2F2F2";  
    alertBox.style.border = "1px solid grey";  
    alertBox.style.left = "50%";  
    alertBox.style.top = "50%";  
    alertBox.style.transform = "translate(-50%, -50%)";  
    alertBox.style.textAlign = "center";  
    alertBox.style.zIndex = "100";  
    var strHtml = "";  
    strHtml += &#39;<div id="title">提示:<div id="close" onclick="certainFunc()"></div></div>&#39;;  
    strHtml += &#39;<div id="content">&#39;+str+&#39;</div>&#39;;  
    strHtml += &#39;<div id="certain"><input id="btn" type="button" value="确 定" onclick="certainFunc()" onhover="hoverFunc()"/></div>&#39;;  
    alertBox.innerHTML = strHtml;  
    document.body.appendChild(alertBox);  
    var title = document.getElementById("title");  
    title.style.textAlign = "left";  
    title.style.marginTop = "20px";  
    title.style.paddingLeft = "20px";  
    title.style.height = "30px";  
    title.style.fontSize = "15px";  
    var close = document.getElementById("close");  
    close.style.width = "16px";  
    close.style.height = "16px";  
    close.style.marginRight = "20px";  
    close.style.background = "url(&#39;images/close.png&#39;)";  
    close.style.float = "right";  
    var content = document.getElementById("content");  
    content.style.margin = "20px";  
    content.style.fontSize = "12px";  
    var certain = document.getElementById("certain");  
    certain.style.position = "relative";  
    certain.style.height = "50px";  
    certainFunc = function() {  
        alertBox.parentNode.removeChild(alertBox);  
    };  
    var btn = document.getElementById("btn");  
    btn.style.width = "60px";  
    btn.style.height = "30px";  
    btn.style.background = "#cccccc";  
    btn.style.border = "1px solid grey";  
    btn.style.position = "absolute";  
    btn.style.borderRadius = "5px";  
    btn.style.right = "20px";  
    btn.style.bottom = "20px";  
    btn.style.marginTop = "10px";  
    btn.style.cursor = "pointer";  
    btn.style.color = "#333";  
    hoverFunc = function() {  
        btn.style.border = "1px blue solid";  
    };  
}

上記は、私があなたのためにコンパイルした、JavaScript でのalert() メソッドの書き換えテクニックの主要な分析です。将来的には役に立ちます。

関連記事:

jsデータ解析スキルまとめ

ネイティブJSカプセル化のフェードイン・フェードアウトエフェクト機能の手順を詳しく解説

vueでsassを使う設定方法 project_vue.js

以上がJavaScript でのalert() メソッドの書き換え手法の分析に焦点を当てます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。