1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 模拟单选钮 1</title> <script language='JavaScript'> /* <![CDATA[ */ function mimicRadio(){ var radName = 'pRadio', selectedId = 'pRadioSelected'; var ns = 'http://www.w3.org/2000/svg';//SVG 元素的命名空间。 var circles = document.getElementsByTagNameNS(ns, 'circle'); var selected = document.getElementById(selectedId);// 用于模拟选中状态的实心圆。 var circle; for (var i = 0; i < circles.length; i++) { circle = circles; if (circle.getAttribute('name') === radName) { // 上面提到过,在 XML 的 DOM 中,没有 getElementsByName 方法,所以我们需要手工检查元素的 name 属性。 // 为 circle 元素添加鼠标响应。 // 通过设置实心圆的位置和 style 中的 display 值,模拟单选钮被选中的行为。 circle.addEventListener('click', function(){ selected.setAttribute('cx', this.getAttribute('cx')); selected.setAttribute('cy', this.getAttribute('cy')); selected.style.display = 'block'; }, true) } } } window.addEventListener('load', mimicRadio, true); /* ]]> */ </script> </head> <body> <div id='svgDiv'> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 120 100" style="border:1px solid; width:120px; height:100px; "> <circle name='pRadio' cx="20" cy="50" r="6" stroke="black" stroke-width='0.5' fill="white" /> <text x='28' y='53'> 上升 </text> <circle name='pRadio' cx="70" cy="50" r="6" stroke="black" stroke-width='0.5' fill="white"/> <text x='78' y='53'> 下降 </text> <circle id='pRadioSelected' cx="20" cy="50" r="2" style='display:none;'/> </svg> </div> </body> </html> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |