moveToElementText使用案例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="robots" content="noindex"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta name="renderer" content="webkit"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 9 <title>ChinaOBD2.com redirect</title> 10 <link rel="shortcut icon" href="https://staticoffice.chinaobd2.com/static/favicon.ico" type="image/x-icon"> 11 <style> 12 body, 13 h1, 14 p { 15 margin: 0; 16 padding: 0; 17 } 18 19 a { 20 text-decoration: none; 21 } 22 23 button { 24 padding: 0; 25 font-family: inherit; 26 background: none; 27 border: none; 28 outline: none; 29 cursor: pointer; 30 } 31 32 html { 33 width: 100%; 34 height: 100%; 35 background-color: #eff2f5; 36 } 37 38 body { 39 padding-top: 100px; 40 color: #222; 41 font-size: 13px; 42 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 43 line-height: 1.5; 44 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 45 } 46 47 @media (max-width: 620px) { 48 body { 49 font-size: 15px; 50 } 51 } 52 53 .button { 54 display: inline-block; 55 padding: 10px 16px; 56 color: #fff; 57 font-size: 14px; 58 line-height: 1; 59 background-color: #0077d9; 60 border-radius: 3px; 61 } 62 63 @media (max-width: 620px) { 64 .button { 65 font-size: 16px; 66 } 67 } 68 69 .button:hover { 70 background-color: #0070cd; 71 } 72 73 .button:active { 74 background-color: #0077d9; 75 } 76 77 .link-button { 78 color: #105cb6; 79 font-size: 13px; 80 } 81 82 @media (max-width: 620px) { 83 .link-button { 84 font-size: 15px; 85 } 86 } 87 88 .logo, 89 .wrapper { 90 margin: auto; 91 padding-left: 30px; 92 padding-right: 30px; 93 max-width: 540px; 94 } 95 96 .wrapper { 97 padding-top: 25px; 98 padding-bottom: 25px; 99 background-color: #f7f7f7; 100 border: 1px solid #babbbc; 101 border-radius: 5px; 102 } 103 104 @media (max-width: 620px) { 105 .logo, 106 .wrapper { 107 margin: 0 10px; 108 } 109 } 110 111 h1 { 112 margin-bottom: 12px; 113 font-size: 16px; 114 font-weight: 700; 115 line-height: 1; 116 } 117 118 @media (max-width: 620px) { 119 h1 { 120 font-size: 18px; 121 } 122 } 123 124 .warning { 125 color: #c33; 126 } 127 128 .link { 129 margin-top: 12px; 130 word-wrap: normal; 131 white-space: nowrap; 132 overflow: hidden; 133 text-overflow: ellipsis; 134 cursor: pointer; 135 } 136 137 .link.is-expanded { 138 word-wrap: break-word; 139 white-space: normal; 140 } 141 142 .actions { 143 margin-top: 15px; 144 padding-top: 30px; 145 text-align: right; 146 border-top: 1px solid #d8d8d8; 147 } 148 149 .actions .link-button + .link-button { 150 margin-left: 30px; 151 } 152 153 .tip { 154 position: relative; 155 display: none; 156 margin-top: 30px; 157 padding-top: 18px; 158 color: #999; 159 text-align: left; 160 background: #f7f7f7; 161 border-top: 1px solid #d8d8d8; 162 opacity: 0; 163 transition: opacity .2s ease-out; 164 } 165 166 .tip.is-visible { 167 opacity: 1; 168 } 169 170 .tip:after, .tip:before { 171 position: absolute; 172 bottom: 100%; 173 right: 5em; 174 content: " "; 175 height: 0; 176 width: 0; 177 border: solid transparent; 178 pointer-events: none; 179 } 180 181 .tip:after { 182 margin-right: -6px; 183 border-color: rgba(247, 247, 247, 0); 184 border-bottom-color: #f7f7f7; 185 border-width: 6px; 186 } 187 188 .tip:before { 189 margin-right: -7px; 190 border-color: rgba(216, 216, 216, 0); 191 border-bottom-color: #d2d2d2; 192 border-width: 7px; 193 } 194 </style> 195 </head> 196 <body> 197 <div class="logo"> 198 <a href="https://www.chinaobd2.com"> 199 <img src="//static.chinaobd2.com/static/img/logo_black_trans.png" 200 srcset="//static.chinaobd2.com/static/img/logo_black_trans@2x.png 2x" alt="知乎"> 201 </a> 202 </div> 203 <div class="wrapper"> 204 <div class="content"> 205 <h1>即将离开知乎</h1> 206 <p class="info">您即将离开知乎，请注意您的帐号和财产安全。</p> 207 <p class="link">https://www.chinaobd2.com/</p> 208 </div> 209 <div class="actions"> 210 <a class="button" href="https://www.chinaobd2.com/">继续访问</a> 211 </div> 212 </div> 213 <script> 214 var showTipButton = document.querySelector('.js-show-tip'); 215 var tipEl = document.querySelector('.tip'); 216 var showTip = function () { 217 tipEl.style.display = 'block'; 218 tipEl.offsetWidth; // force reflow 219 tipEl.className = 'tip is-visible'; 220 return false; 221 }; 222 223 var linkEl = document.querySelector('.link'); 224 var selectLink = function () { 225 linkEl.className = 'link is-expanded'; 226 if (document.body.createTextRange) { 227 range = document.body.createTextRange(); 228 range.moveToElementText(linkEl); 229 range.select(); 230 } else if (window.getSelection) { 231 selection = window.getSelection(); 232 range = document.createRange(); 233 range.selectNodeContents(linkEl); 234 selection.removeAllRanges(); 235 selection.addRange(range); 236 } 237 ; 238 }; 239 240 if (window.addEventListener) { 241 showTipButton.addEventListener('click', showTip); 242 linkEl.addEventListener('click', selectLink); 243 } else { 244 showTipButton.attachEvent('onclick', showTip); 245 linkEl.attachEvent('onclick', selectLink); 246 } 247 </script> 248 </body> 249 </html>
通过以上案例，我们可以比较清楚的知道 createTextRange(),moveToElementText() 这两个函数的作用 和使用方法，仅供参考。
