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

最新推荐文章于 2025-06-18 17:18:05 发布
原创 最新推荐文章于 2025-06-18 17:18:05 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #C #C++ #C# #ViewUI

本文通过一个简单的示例展示了如何使用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";       

document.getElementById使用介绍，看了定有收获
体会技术牛人的高傲
01-15 2389
定义和用法     getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法 document.getElementById(id)，这里的id是以字符串的形式标注说明     HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsB
JavaScript document.getElementById(“id“).onclick=tt 函数中带参数
qq_38394249的博客
02-25 1952
html： <input type="button" id="Button" name="Button" value="button" /> js: document.getElementById('Button').onclick = validata; function validata() { alert("我被调用了"); } 这样只能代用无参的函数 想要调用有参的,参考了 document.getElementById('Button').onclick = function (
document.getElementById("id").onclick=tt
小倪的专栏
08-03 5932
function tt(){ alert("测试"); }       document.getElementById("id").onclick=tt; //tt函数不要加（）   //也可以这样 document.getElementByid("id").onclick=function tt(){         alert("测试"); }
第一章：前后端数据交换之document.getElementByIdd的使用
clwhgg的博客
06-18 748
前后端交互中最难的一点就是各种数据的交互，要求对数据格式有着很深的理解提示：以下是本篇文章正文内容，下面案例可供参考。
document.getElementByID('btn').click();
十年之约
02-02 1万+
<input type='button' id='btn' onclick='setoption()' /> document.getElementByID('btn').click();
document.getElementById("myBtn").onclick=function(){displayDate()};解析
大傻冒@你的博客
07-14 1万+
首先我们先来看看下面的三个例子，然后我们将这三个例子进行比较（看仔细哦！）&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&am
js/ts 控件的点击事件（document.getElementById("**")）
热门推荐
Crazy_LinkFern的博客
03-15 1万+
在js/ts页面添加对某个控件的点击事件，可以使用如下代码： document.getElementById("控件id").onclick = () => { console.log("按了"); }
纯JavaScript实现获取onclick、onchange等事件的值
10-24
这里，我们使用了`getAttributeNode()`方法来获取`onchange`属性作为一个属性节点，然后通过`nodeValue`获取其包含的函数调用字符串。 要注意的是，`getAttribute()`方法在处理事件时会返回一个函数对象，而不是...
JavaScript获取onclick、onchange等事件值的代码
10-27
var onchangeValue = document.getElementById("city").getAttributeNode("onchange").nodeValue; alert(onchangeValue); }); ``` 在这里，`getAttributeNode("onchange")`返回了一个`Attr`对象，该对象的`...
<td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td>function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = showPopup; input.parentNode.appendChild(img); input.style.display = "none"; // 隐藏原始的input元素 } reader.readAsDataURL(input.files[0]); } } function showPopup() { var popup = document.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 在设置弹出窗口中的图片之前获取弹出窗口的宽度和高度 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; // 计算图片应该在弹出窗口中居中显示的位置 var imgLeft = (popupWidth - popupImg.width * scale) ; var imgTop = (popupHeight - popupImg.height * scale); // 设置弹出窗口中的图片位置 popupImg.style.left = imgLeft + "px"; popupImg.style.top = imgTop + "px"; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = `scale(${scale})`; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; };我添加图片后，点击图片出现弹窗，弹窗位置在屏幕中间，在弹窗可以使用滚轮放大图片
07-08
document.getElementById("popup").addEventListener("wheel", function(e) { e.preventDefault(); var scale = parseFloat(popupImg.style.transform.replace("scale(", "").replace(")", "")); scale += e....
<!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
我们注意到代码中使用了mermaid.render方法，但是这个方法在mermaid v10中已经发生了变化。在v10中，我们使用`mermaid.mermaidAPI.render`或者新的`mermaid.render`方式（返回一个Promise）。另外，代码中使用了`...
<td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> var table = document.getElementById("myTable"); var imageColumnIndex = 8; // 指定要添加图片按钮的列索引 function addRow() { var newRow = table.insertRow(); var cellsCount = table.rows[0].cells.length; for (var i = 0; i < cellsCount; i++) { var newCell = newRow.insertCell(); newCell.contentEditable = true; newCell.innerHTML = "新单元格"; if (i === imageColumnIndex) { var newButton = document.createElement("button"); var newInput = document.createElement("input"); newInput.type = "file"; newInput.onchange = function() { previewImage(this); }; newInput.onclick = function() { showPopup(this.src); }; newCell.appendChild(newButton); newCell.appendChild(newInput); } } }我需要在新添加行时指定的多列都具有添加图片的功能
07-11
var table = document.getElementById("myTable"); var imageColumnIndexes = [2, 4, 6]; // 指定要添加图片按钮的列索引 function addRow() { var newRow = table.insertRow(); var cellsCount = table.rows[0]....
【解决】document.getelementbyid("XX").click失效
持续疯长，往天那边去
09-27 4977
[code="js"] var card=document.getElementById('login-link'); if(document.createEvent){ var ev = document.createEvent('HTMLEvents'); ev.initEvent('click', false, true); c...
document.getElementById使用
shixiaoguo90的专栏
12-20 2157
HTML DOM getElementById() 方法 HTML DOM Document 对象参考手册 定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 get
IE中的document.all和document.getElementById()
零全零美
04-19 792
document.getElementById 有时会抓name放过了id ，据说是IE的一个BUG；http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443页面中有     &lt;input type="hidden" id="hello8" name="category_id" value="2" /&gt; ...
document.getElementById详解
mazhiguo_nuaa的专栏
11-22 1298
 document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 “ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！ 参考资料： 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 今天在网络上查找 document
html为图片click,HTML <img> onclick函数jquery
weixin_39969976的博客
06-04 893
我有一个网格图像，它是用PHP生成的HTML。每个图像都有一个onclick()函数，它在参数中有一个PHP变量。在HTML所在的页面上，我有一个使用onclick(arg)函数中参数的Javascript函数。HTML onclick函数jquery 我已经开始使用jquery，并且希望能够将此onclick()函数更改为我的jquery函数，同时使用PHP页面中的PHP参数。这是从生成HTM...
js 代码实现onchange事件
Alinaxz的专栏
08-09 8260
select 或text的onchange事件需要手动（通过键盘输入）改变select或text的值才能触发，如果在js中给select或text赋值，则无法触发onchang事件， 例如，在页面加载完成以后，需要触发一个onChange事件，在js中用document.get
click与onclick、getElementbyname与getElemetsByName的区别
fly0744的专栏
05-15 1024
今天在做一个题的时候，弄了半天也没搞出来，最终发现，是几个细小的地方平常没有注意，现在总结起来，以后注意点： 原题是这样的：只能添加js代码，实现弹框显示选择的内容。 我开始的代码是：           window.onload =    function aa(){      document.getElementById("subm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值