javascript - Javascript:如何创建没有文本内容的按钮元素
问题描述
在 html 中,我有一个没有文本的按钮元素。它有一个带有一些路径和矩形的子 svg 元素。它工作正常:
我尝试在 javascript 中创建它。问题是,该按钮不可见。如果我使用textContent
or为其设置一些文本,则innerHtml
该按钮与文本一起可见,但 svg 不存在。如何在 javascript 中创建此按钮?这是代码:
var myButton = document.createElement("button");
myButton.setAttribute("class", "my-button");
myButton.setAttribute("id", "foo");
var mySVG = document.createElement("svg");
mySVG.setAttribute("id", "my-svg");
mySVG.setAttribute("viewBox", "0 0 12.25 15.45");
var icon1 = document.createElement("g");
icon1.setAttribute("class", "g-element1");
icon1.setAttribute("id", "g1");
var iconPath = document.createElement("path");
iconPath.setAttribute("d", "M0,25L0,0l12.25,7.7L0,15.45z");
var icon2 = document.createElement("g");
icon2.setAttribute("class", "g-element2");
icon2.setAttribute("id", "g2");
var rect1 = document.createElement("rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("width", "4.1");
rect1.setAttribute("height", "15.45");
var rect2 = document.createElement("rect");
rect2.setAttribute("x", "8.1");
rect2.setAttribute("y", "0");
rect2.setAttribute("width", "4.1");
rect2.setAttribute("height", "15.45");
icon1.appendChild(iconPath);
icon2.appendChild(rect1);
icon2.appendChild(rect2);
mySVG.appendChild(icon1);
mySVG.appendChild(icon2);
myButton.appendChild(mySVG);
document.getElementById('some-element').appendChild(myButton)
.my-button {
font-size: 14px;
height: 17px;
cursor: pointer;
margin-left: 5px;
&:hover, &:focus {
opacity: .8;
}
}
<div id="some-element">
<button class="my-button" id="foo">
<svg id="my-svg" viewBox="0 0 12.25 15.45">
<g class="g-element1" id="g1">
<path d="M0,25L0,0l12.25,7.7L0,15.45z"/>
</g>
<g class="g-element2" id="g2">
<rect x="0" y="0" width="4.1" height="15.45"/>
<rect x="8.1" y="0" width="4.1" height="15.45"/>
</g>
</svg>
</button>
</div>
此外,当我仅在 javascript 中创建按钮并且没有为其设置任何文本(也没有 svg)时,该按钮不可见。
解决方案
使用 JavaScript 创建 SVG 元素(包括 SVG 标记内的元素)时,需要使用document.createElementNS(namespaceURI, qualifiedName)
适当的命名空间 URI http://www.w3.org/2000/svg
。您还需要为 SVG 元素指定高度。
因为您必须为您在 SVG 标记中创建的每个元素以及 SVG 标记本身使用命名空间,所以您可能需要对函数进行 curry 以节省空间并防止拼写错误:
const createSVGElement = qn => document.createElementNS("http://www.w3.org/2000/svg", qn);
这是您修复的代码:
var myButton = document.createElement("button");
myButton.setAttribute("class", "my-button");
myButton.setAttribute("id", "foo");
const createSVGElement = qn => document.createElementNS("http://www.w3.org/2000/svg", qn);
var mySVG = createSVGElement("svg");
mySVG.setAttribute("id", "my-svg");
mySVG.setAttribute('height', "14px");
mySVG.setAttribute("viewBox", "0 0 12.25 15.45");
var icon1 = createSVGElement("g");
icon1.setAttribute("class", "g-element1");
icon1.setAttribute("id", "g1");
var iconPath = createSVGElement("path");
iconPath.setAttribute("d", "M0,25L0,0l12.25,7.7L0,15.45z");
var icon2 = createSVGElement("g");
icon2.setAttribute("class", "g-element2");
icon2.setAttribute("id", "g2");
var rect1 = createSVGElement("rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("width", "4.1");
rect1.setAttribute("height", "15.45");
var rect2 = createSVGElement("rect");
rect2.setAttribute("x", "8.1");
rect2.setAttribute("y", "0");
rect2.setAttribute("width", "4.1");
rect2.setAttribute("height", "15.45");
icon1.appendChild(iconPath);
icon2.appendChild(rect1);
icon2.appendChild(rect2);
mySVG.appendChild(icon1);
mySVG.appendChild(icon2);
myButton.appendChild(mySVG);
document.getElementById("some-element").appendChild(myButton);
.my-button {
font-size: 14px;
height: 17px;
cursor: pointer;
margin-left: 5px;
&:hover, &:focus {
opacity: .8;
}
}
<div id="some-element">
<button class="my-button" id="foo">
<svg id="my-svg" viewBox="0 0 12.25 15.45" height="14px">
<g class="g-element1" id="g1">
<path d="M0,25L0,0l12.25,7.7L0,15.45z"/>
</g>
<g class="g-element2" id="g2">
<rect x="0" y="0" width="4.1" height="15.45"/>
<rect x="8.1" y="0" width="4.1" height="15.45"/>
</g>
</svg>
</button>
</div>
推荐阅读
- firefox - FF 57.0 - 转化率比其他版本低 100 倍但不为空
- ios - 在 MVVM 中绑定而不触发
- fullcalendar - 如何添加带有图标和文本的自定义按钮?
- mysql - 如何在 MySQL 8 的 JDBC 连接字符串中设置 SQL 模式?
- postgresql - 我们可以在 Pgadmin 4 中附加调试器吗
- html - 网页在本地看起来正确,但在 IIS (Internet Explorer 11) 上不正确
- android - 设备空闲时的地理位置
- mysql - 使用 Express 和 Node.js 将记录插入 MySQL 的问题
- c++ - Assembly x86 convert to ARM function call with varying number of parameters to Arm
- excel - 使用单元格内容打开文件