<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://at.alicdn.com/t/font_2090302_3rtv8f729nq.js"></script> <style> .icon { width: 1em; height: 1em; overflow: hidden; margin-right: 2px; } #fn-list { position: absolute; top: 60px; left:12px; z-index: 100; display: flex; } #fn-list .wrapper{ padding: 12px; display: flex; color: white; margin-right: 1px; background: rgb(99,99,99); cursor: pointer; } #fn-list .highLight{ background: rgb(42,106,251); } </style> </head> <body> <div id ="fn-list"></div> <script> let divRoot = document.getElementById('fn-list'); function generateButtonList(json,key) { return ` <div class="wrapper" id="${key}" ${json.last && 'style="margin-left:12px"'} οnclick="bindEvent(this)"> <svg id="${key}" class="icon" aria-hidden="true"><use xlink:href="#Geoiconmessage_success"></use></svg> <div class="text" id="${key}">${json.name}</div> </div>` } let modeList = [ { name:'点', key:'point' }, { name:'图标', key:'icon' }, { name:'立方体', key:'point' }, { name:'圆柱', key:'icon' }, { name:'椭圆体', key:'point' }, { name:'平面', key:'icon' }, { name:'线', key:'point' }, { name:'走廊', key:'icon' }, { name:'绘制区', key:'point' }, { name:'折线体', key:'icon' }, { name:'清除', key:'icon', last:true }, ] let res = ''; modeList.map( (v,index) => { res += generateButtonList(v,index); }) divRoot.innerHTML = res ; function bindEvent(e) { console.log(e) } let highLightDiv </script> </body> </html>
模板字符串 元素增加事件
最新推荐文章于 2023-11-16 14:23:00 发布