运用innerHTML的插入样式

本文探讨了在Internet Explorer浏览器中,将包含<style>标签的HTML代码动态插入DOM时遇到的问题。若样式标签位置不当,则可能导致样式不被正确应用的情况。文章对比了IE与Firefox在这方面的差异。

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

把一段包含<style>的html插入到一个dom里面
结果发现

IE对这里的顺序要严格要求。必须先插入html内容然后再插入<style>样式才生效例如


<DIVID="test"></DIV>
<SCRIPTLANGUAGE="JavaScript">
document.getElementById("test").innerHTML="<b>hello!World!!!</b>";
document.getElementById("test").innerHTML+="<style>b{color:#f00}</style>";
</SCRIPT>

这样test这个div里就会出现一个红色的hello!World!但是如果把<style>放到<b>前头,就被IE无视了。但是FF对这种方式支持得比较好。

当然这样的方式非不得已的情况下
### 使用 CSS 和 HTML 实现 Input 输入框中的图片 在 HTML 中,可以通过 `background-image` 属性结合 CSS 来实现将图片嵌入到 `<input>` 元素中。这种方法不仅能够提升用户体验,还能使界面更加直观和美观。 以下是具体实现方式: #### 方法一:通过 CSS 设置背景图片 可以利用 `background-image` 属性来为输入框添加一张小图标作为提示。这种方式简单高效,并且兼容大多数现代浏览器。 ```css .input-with-icon { background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102205696&di=9cb52f7f2c062423319fdb31cc669b86&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227213604_BVZYf.jpeg'); background-repeat: no-repeat; background-position: 5px center; padding-left: 30px; /* 确保文本不会覆盖图片 */ border: 1px solid #ccc; height: 30px; } ``` ```html <input type="text" class="input-with-icon" placeholder="请输入信息..."> ``` 此方法的核心在于调整 `padding-left` 值以防止用户输入的内容遮挡住背景图[^2]。 --- #### 方法二:使用伪元素 ::before 或 ::after 如果希望更灵活地控制图像的位置或者样式,则可以考虑借助伪类选择器 `::before` 或者 `::after` 完成相同功能。注意这里需要额外包裹一层容器用于挂载这些伪元素。 ```css .input-container { position: relative; } .input-container .icon { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: 20px; height: 20px; } .input-container input[type='text'] { padding-left: 40px; /* 预留空间给左侧图标 */ border: 1px solid #ccc; height: 30px; } ``` ```html <div class="input-container"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102205696&di=9cb52f7f2c062423319fdb31cc669b86&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227213604_BVZYf.jpeg" alt="" class="icon"/> <input type="text" placeholder="请输入信息..." /> </div> ``` 该方案允许我们单独定义图标大小及其位置关系而无需依赖于父级组件的尺寸约束[^2]。 --- #### 方法三:基于 div 模拟 textarea/input 行为 (contenteditable) 当传统手段无法满足需求时,还可以尝试采用可编辑区域 (`contenteditable`) 结合 JavaScript 动态修改 DOM 节点的方式达成目标。例如以下例子展示了如何创建一个支持插入表情符号的功能性文本框[^1]: ```javascript function changeSaytext(imgElement) { const sayTextDiv = document.getElementById('saytext'); let currentContent = sayTextDiv.innerText || ''; // 将选中的图片替换为其 URL 地址并追加至现有内容之后 sayTextDiv.innerHTML += '<br><img src="' + imgElement.src + '" style="height:20px;">'; } ``` ```html <div id="saytext" class="div-edit" contenteditable="plaintext-only" placeholder="请输入信息..."></div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102205696&di=9cb52f7f2c062423319fdb31cc669b86&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227213604_BVZYf.jpeg" height="80" onclick="changeSaytext(this)" /> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102357940&di=aaef4c5eee235a59341d29d94581ae4b&imgtype=0&src=http%3A%2F%2Fimage.retui8.com%3Furl%3Dhttp%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FvwWXNGTJrV2wEtK2Z4iaEzgJP95RdTy73iazdqWib8sDWSlWlhWY7nGuuFeYwXfVQtq23DtkLJUYEDxs9YNy2icQoA%2F640%3F.jpg" height="80" onclick="changeSaytext(this)" /> ``` 这种技术特别适合那些需要高度自定义交互逻辑的应用场景,比如聊天应用内的消息发送栏位设计等。 --- ### 总结 以上介绍了三种不同的解决方案分别适用于不同层次复杂度的要求下向标准 html input 控件内部加入图形化装饰的方法。无论是单纯依靠 css 还是深入运用 js 编程技巧都可以有效达到目的[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值