document.getElementById加onClick,onChange,style属性的方法

本文通过一个简单的示例展示了如何使用HTML元素与JavaScript进行交互。包括如何为HTML元素设置ID,以及如何通过JavaScript获取这些元素并响应用户的点击和选择事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<a href="javascript:void(0)" id="c1">12322222222222222</a><br>
<select id="s1"><option value="1">111111111111</option><option value="2">222222222222</option></select>
<script>
document.getElementById ("c1").onclick=function()
{
 alert('c');
}
document.getElementById ("s1").onchange=function()
{
 s();
}
function s(){alert('s');}
</script>

 

style设置:

 

document.getElementById(src).style.display="none";       

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mermaid 编辑器(增强版)</title> <style> :root { --font-main: -apple-system, BlinkMacSystemFont, 'San Francisco', Helvetica, Arial, sans-serif; --primary-color: #007aff; --text-color: #111; --bg-color: #f9f9f9; --card-bg: #fff; --border-radius: 20px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body { font-family: var(--font-main); background: var(--bg-color); color: var(--text-color); margin: 0; padding: 2rem; } .container { max-width: 960px; margin: auto; } .card { background: var(--card-bg); border-radius: var(--border-radius); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow); } textarea { width: 100%; height: 200px; font-family: monospace; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; border: 1px solid #ccc; } button, select { font-family: inherit; background: var(--primary-color); color: white; padding: 0.5rem 1rem; border: none; border-radius: 8px; cursor: pointer; margin-right: 10px; } .mermaid-box { background: white; border-radius: 12px; padding: 1rem; overflow-x: auto; } </style> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> </head> <body> <div class="container"> <div class="card"> <h2>🛠 自定义 Mermaid 编辑器(增强)</h2> <textarea id="mermaidInput">graph TD\n A[开始] --> B[步骤一]\n B --> C[步骤二]\n C --> D[结束]</textarea> <div> <button onclick="renderMermaid()">渲染图表</button> <button onclick="saveSnapshot()">保存快照</button> <button onclick="exportPNG()">导出 PNG</button> <button onclick="clearMermaid()">清空</button> <select id="themeSelect" onchange="switchTheme(this.value)"> <option value="default">亮色主题</option> <option value="dark">暗色主题</option> <option value="neutral">中性灰</option> </select> </div> <div class="mermaid-box" id="customMermaid"></div> <h3>📜 历史快照</h3> <ul id="historyList"></ul> </div> </div> <script> let theme = 'default'; let history = JSON.parse(localStorage.getItem('mermaidHistory') || '[]'); let currentCode = localStorage.getItem('lastCode') || document.getElementById('mermaidInput').value; function switchTheme(val) { theme = val; renderMermaid(); } function renderMermaid() { const code = document.getElementById('mermaidInput').value; currentCode = code; localStorage.setItem('lastCode', code); const insert = document.getElementById('customMermaid'); insert.innerHTML = ''; mermaid.initialize({ startOnLoad: false, theme }); mermaid.render('graphDiv', code, (svgCode) => { insert.innerHTML = svgCode; }); } function clearMermaid() { document.getElementById('mermaidInput').value = ''; document.getElementById('customMermaid').innerHTML = ''; localStorage.removeItem('lastCode'); } function saveSnapshot() { history.unshift(currentCode); if (history.length > 10) history = history.slice(0, 10); localStorage.setItem('mermaidHistory', JSON.stringify(history)); loadHistory(); } function loadHistory() { const list = document.getElementById('historyList'); list.innerHTML = ''; history.forEach((code, i) => { const li = document.createElement('li'); li.innerHTML = `<a href="#" onclick='restore(${i})'>图 ${i + 1}</a>`; list.appendChild(li); }); } function restore(index) { const code = history[index]; document.getElementById('mermaidInput').value = code; renderMermaid(); } async function exportPNG() { const svg = document.querySelector('#customMermaid svg'); if (!svg) return alert('请先渲染图表'); const canvas = document.createElement('canvas'); canvas.width = 1024; canvas.height = 768; const ctx = canvas.getContext('2d'); const v = await Canvg.fromString(ctx, new XMLSerializer().serializeToString(svg)); await v.render(); const link = document.createElement('a'); link.download = 'diagram.png'; link.href = canvas.toDataURL(); link.click(); } // 初始化渲染 document.getElementById('mermaidInput').value = currentCode; renderMermaid(); loadHistory(); </script> </body> </html> 上面的代码有问题,无法渲染mermaid,无法生成渲染图,
最新发布
07-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值