先端知識の整理

17128 ワード

文書ディレクトリ

  • jqueryはleft,topをどのように制御するか.
  • jsはブラウザのビジュアルエリアサイズをどのように取得しますか?
  • css入力ボックスplaceholderのデフォルト色
  • を変更する方法
  • jq input入力ボックスの値
  • を取得する.
  • ボタンバインドイベント
  • ボタン左フィレット右角
  • input,button間の間隔
  • を除去する
  • 入力ボックスは、中間入力
  • から入力.
  • 参照
  • jqueryはleftをどのように制御しますか?


    修正がleftならtop.positionを追加する必要があります.例:
    $("#tooltip").css({top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
    

    理由を検索して、要素の配置タイプに関係していることがわかりました.
    $("#tooltip").css({"position": "absolute","top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"})
    

    jsはブラウザのビジュアルエリアサイズをどのように取得しますか?


    DOCTYPEが宣言されていないIEでは、ブラウザの表示ウィンドウサイズは以下のようにしか取得できません.
    document.body.offsetWidth
    document.body.offsetHeight
    

    DOCTYPEが宣言されたブラウザでは、以下のようにしてブラウザ表示ウィンドウのサイズを取得できます.
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    

    IE,FF,Safariはいずれもこの方法をサポートし,operaはこの属性をサポートするが,ページサイズを返す.
    また、IE以外のすべてのブラウザはこの情報をwindowオブジェクトに保存し、以下のように取得することができます.
    window.innerWidth
    window.innerHeight
    

    css入力ボックスplaceholderのデフォルト色を変更する方法

    
    <html>
        <head>
            <meta charset="UTF-8">
            <title>title>
            <style type="text/css">
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: blue;
                opacity:1; 
                font-size: 5px;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: red;
                opacity:1;
            }
            /*                     */
    
            input:-ms-input-placeholder { /* IE */
                color: yellowgreen;
                opacity:1; 
            }
    
            input::-webkit-input-placeholder{/* webkit      ,   ,edge */
                color: blue;
                opacity:1;
                font-size: 15px;
            }
    
            /*input::placeholder{/*       ,       ;IE edge   */
              /*  color: orchid;
                opacity:1;
                font-size: 15px;
            }*/
    
            style>
        head>
        <body>
            <input name="secret" placeholder="      " />
        body>
    html>
    

    jq input入力ボックスの値を取得する

    <form id="form1">
            <table border="0">
                <tr>
                    <td>td>
                    <td>
                        <input id="name" name="name" type="text" />
                    td>
                tr>
            table>
       form>
    
           function readtext() {
     
                //    
                var name = document.getElementById("name").value;
                alert(name);
     
                //    
                name = form1.name.value;
                alert(name);
     
                //     jquery
                name = $("#name").val();
                alert(name);
     
                //     jquery
                name =  $("input[id='name']").val();
                alert(name);
     
                //     jquery
                name = $("#name").attr("value");
                alert(name);
     
                //     jquery
                name = $("input[id='name']").attr("value");
                alert(name);
                          
            }
    
    

    ボタンにイベントをバインド

    $('#js-add-fontsize').on('click',function(event){
       $editor.css('font-size','20px');
    });
    
    

    ボタン左フィレット右コーナー

    .styleOne{
    border-top-left-radius: 6px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 0px;
    }
    

    Input,button間の間隔を取り除く

    1.          :font-size:0px;
     input    (font-size)  0px,      ,           (input)     ;
    2.  input,button       
    3.  input    ,        
    

    入力ボックス中間から入力

    <input type="text" name="mid" style="text-align:center;">
    

    リファレンス


    https://blog.csdn.net/axzywan/article/details/7497542 http://www.daqianduan.com/3784.html https://blog.csdn.net/j080624/article/details/79312870 https://www.cnblogs.com/chivasknight/p/8279069.html https://blog.csdn.net/weistin/article/details/79526204