我正在尝试创建一个表格宽度的 javascript 和 createElement()。我的问题是它没有设置任何背景图像(只是纯白色)。但是,如果我将 的innerHTML 设置为具有相同路径的图像标签,它就可以工作!
create : function () {
var tbody = document.createElement('tbody');
for(i in this.map) {
var tr = document.createElement('tr');
for(j in this.map[i]) {
var td = document.createElement('td');
var cell = this.map[i][j];
td.style.color = "red";
console.log("gfx/tile_"+this.backgrounds[cell]+".png");
td.style.backgroundImage = "url(gfx/tile_"+this.backgrounds[cell]+".png);";
td.innerHTML = "j";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
this.gameDOMelm.appendChild(tbody);
}
Run Code Online (Sandbox Code Playgroud)
我还有另一个问题,表中的每个 ROW 之间都有空间。这是我要附加到的 DOM 元素:
<table id="gameField" cellpadding="0" cellspacing="0"></table>
Run Code Online (Sandbox Code Playgroud)
和 CSS
* {padding: 0; margin: 0;}
td {
min-width: 32px;
min-height: 32px;
width: 32px;
height: 32px;
}
Run Code Online (Sandbox Code Playgroud)
这些问题在 Chrome …
我已经阅读了几个与此类似的问题,但我无法使代码正常工作.我想在用户点击SVG区域时添加SVG元素.
这是我的带有SVG的HTML5,它正确呈现:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
<script src="svgdraw.js"></script>
</head>
<body>
<svg id="canvas" width="500" height="500">
<circle cx="80" cy="80" r="50" fill="blue"/>
</svg>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
以下是在click事件上执行的JavaScript:
var svgDocument = document.getElementById('canvas');
var svgns = "http://www.w3.org/2000/svg";
var shape = svgDocument.createElementNS(svgns,"circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
document.getElementById('canvas').appendChild(shape);
Run Code Online (Sandbox Code Playgroud)
在Google Chrome中,我收到一条createElementNS不存在的错误消息.但如果我删除所有NS和null任何一个,我无法使它工作.这样做的正确方法是什么?不同的浏览器是不同的?
我想创建一组<style>标签并将其添加到HTML文档的head标签中.
我知道我可以这样开头:
$url_contents = file_get_contents('http://example.com');
$dom = new DOMDocument;
$dom->loadHTML($url_contents);
$new_elm = $dom->createElement('style', 'css goes here');
$elm_type_attr = $dom->createAttribute('type');
$elm_type_attr->value = 'text/css';
$new_elm->appendChild($elm_type_attr);
Run Code Online (Sandbox Code Playgroud)
现在,我也知道我可以像这样在HTML中添加新的样式标记:
$dom->appendChild($ss_elm);
$dom->saveHTML();
Run Code Online (Sandbox Code Playgroud)
但是,这将创建以下方案:
<html>
<!--Lots of HTML here-->
</html><style type="text/css">css goes here</style>
Run Code Online (Sandbox Code Playgroud)
以上基本上没有意义; CSS没有解析,只是坐在那里.
我在网上找到了这个解决方案(显然没有用):
$head = $dom->getElementsByTagName('head');
$head->appendChild($new_elm);
$dom->saveHTML();
Run Code Online (Sandbox Code Playgroud)
谢谢您的帮助!!
可能吗?
我正试图在我的文档中"包含"一个JS文件.它工作正常,但是当文件脱机时,它应该将变量设置为FALSE.我用谷歌搜索,但我没有得到它.所以我尝试使用try/catch:
try {
var jq = document.createElement('script');
//jq.onload = put;
jq.type = 'text/javascript';
jq.src = 'http://127.0.0.1:9666/jdcheck.js';
document.getElementsByTagName('head')[0].appendChild(jq);
}
catch(e) {
console.log('An error has occurred: '+e.message);
jdownloader = false;
}
Run Code Online (Sandbox Code Playgroud)
它只是抛出了我的错误
Failed to load resource http://127.0.0.1:9666/jdcheck.js
Run Code Online (Sandbox Code Playgroud)
如何将var设置为FALSE?
谢谢Markus
我已经设法让图像以我想要的方式列出,现在我将每个图像作为一个链接,指向它自己的 URL
现在是什么:
<img src="01.jpg" />
Run Code Online (Sandbox Code Playgroud)
我希望它是什么:
<a href="01.jpg" target="_new"><img src="01.jpg" /></a>
Run Code Online (Sandbox Code Playgroud)
当前代码:
<script>
var fullLink = 'http://www.website.com/'; //Public URL
var ext = ".jpg"; //File Extension
for ( var i = 1; i < 6 ; i++ ) {
var link = document.createElement('a');
var elem = document.createElement("img");
if (i < 10) {
link.setAttribute("href", fullLink+"0"+i+ext);
elem.setAttribute("src", fullLink+"0"+i+ext);
} else {
link.setAttribute("href", fullLink+i+ext);
elem.setAttribute("src", fullLink+i+ext);
}
elem.setAttribute("height", "250px");
document.getElementById("images").appendChild(link);
document.getElementById("images").appendChild(elem);
}
</script>
Run Code Online (Sandbox Code Playgroud) JavaScript
var textBlock = document.createElement('div');
textBlock.setAttribute('class', 'finalBlock');
var addFinalBlock = document.getElementsByClassName('block')[0];
addFinalBlock.appendChild(textBlock);
textBlock.innerHTML = "Make this block a text block";
// -------
var textBlock2 = document.createElement('div');
textBlock2.setAttribute('class', 'finalBlock');
var addFinalBlock2 = document.getElementsByClassName('block')[0];
addFinalBlock2.appendChild(textBlock2);
textBlock2.innerHTML = "Make this block a text block2";
// -------
var textBlock3 = document.createElement('div');
textBlock3.setAttribute('class', 'finalBlock');
var addFinalBlock3 = document.getElementsByClassName('block')[0];
addFinalBlock3.appendChild(textBlock3);
textBlock3.innerHTML = "Make this block a text block3";
// -------
var textBlock4 = document.createElement('div');
textBlock4.setAttribute('class', 'finalBlock');
var addFinalBlock4 = document.getElementsByClassName('block')[0];
addFinalBlock4.appendChild(textBlock4);
textBlock4.innerHTML = "Make this block …Run Code Online (Sandbox Code Playgroud) 我是新来的,过去几天我一直在玩它。我正在尝试向 DOM 附加一个值,我找到了一种方法,但我正在寻找一种方法
var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para);
Run Code Online (Sandbox Code Playgroud)
但是,我正在寻找不同的方式。我尝试了几种不同的方法,但我被卡住了。除了上面的这个方法还有别的方法吗^^^^
import React, { Component } from 'react';
import { render } from 'react-dom';
export class Parent extends React.Component {
constructor(props) {
this.greet = this.greet.bind(this);
this.state = { text: " " };
}
greet(value) {
//console.log(value);
var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para);
}
render() {
return (
<div>
<Child onGreet={this.greet} />
</div>
)
}
};
export class Child extends React.Component {
constructor(props) { …Run Code Online (Sandbox Code Playgroud) 我有两个问题.
首先,场景:
由于我们在NOSCRIPT的移动浏览器支持方面遇到了一些奇怪的问题,我的任务是提出另一种"检测"JS的解决方案.解决方案逻辑是在页面上有两个DIV.一个是错误,表明你没有JS和他默认显示.如果有一个JS,我们想要向HEAD添加一个新的STYLE块,它会覆盖以前的CSS并隐藏错误,而是显示内容.
示例HTML:
<div id="div1">div 1 (should be shown if JS enabled)</div>
<div id="div2">div 2 (should be hidden if JS enabled)</div>
Run Code Online (Sandbox Code Playgroud)
这是我开始的JS:
var styleNode = document.createElement('style');
styleNode.setAttribute("type", "text/css");
styleNode.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
headTag.appendChild(styleNode);
Run Code Online (Sandbox Code Playgroud)
但是,我遇到了问题.一些谷歌搜索导致IE可以拥有的安全问题的描述,如果您尝试在将innerHTML放入创建的元素之前将其插入到DOM中:
http://karma.nucleuscms.org/item/101
所以,我修改了脚本:
var styleNode = document.createElement('style');
styleNode.setAttribute("type", "text/css");
var headTag = document.getElementsByTagName("head")[0];
headTag.appendChild(styleNode);
var aStyleTags = headTag.getElementsByTagName("style");
var justAddedStyleTag = aStyleTags[aStyleTags.length-1];
justAddedStyleTag.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
Run Code Online (Sandbox Code Playgroud)
问题1:这是IE问题的有效解决方法吗?有更有效的解决方案吗?
问题2:即使进行了调整,脚本仍然无法在IE中运行.它在Firefox中工作正常,但在IE 7中我得到了"未知的运行时错误".
我在JSBIN上有这个代码的示例:
有谁知道IE正在发生什么?
更新:
我通过谷歌偶然发现了这个链接.请注意最后的评论:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
也就是说,你真的应该把所有的样式规则都放在HEAD中,以便严格遵守XHTML.这样做也有点棘手,因为你不能使用innerHTML直接注入HEAD或STYLE元素.(这两个标签都是READ.). …
我有一个 div,我试图在 div 中现有的 h3 和 p 元素之前插入几个元素(h3 和 p)。insertBefore ( http://www.php.net/manual/en/domnode.insertbefore.php )的 PHP 文档说这正是应该发生的情况,但它不是在现有元素之前插入,而是替换里面的所有现有元素我的“内容”分区。
这是我的代码:
$webpage = new DOMDocument();
$webpage->loadHTMLFile("news.html");
$headerelement = $webpage->createElement('h3', $posttitle);
$pelement = $webpage->createElement('p', $bodytext);
$webpage->formatOutput = true;
$webpage->getElementById('content')->insertBefore($headerelement);
$webpage->getElementById('content')->insertBefore($pelement);
$webpage->saveHTMLFile("newpost.html");
Run Code Online (Sandbox Code Playgroud)
我确信我只是不明白一些事情......任何帮助将不胜感激,谢谢。
我构建了一个组件来将所有图标转换为 SVG。
所以,在我的代码末尾,我有这个:
return createElement('i',
'<SVG>CODE</SVG>'
)
Run Code Online (Sandbox Code Playgroud)
这个SPAN在哪里,我应该加个动态HTML!我找不到任何选择来做到这一点。这个 HTML 将是一个 SVG,因此,出于这个原因,我需要添加完整的 HTML。
有人有同样的问题吗?有什么不见了??当我的组件正在运行时,如何将其设为新的 HTML ???
ps:我不需要知道如何创建 SVG 文件,但是是的,如何在我的动态组件内呈现 HTML,可以是任何人。
谢谢
createelement ×10
javascript ×8
appendchild ×2
domdocument ×2
php ×2
css ×1
dom ×1
html ×1
html5 ×1
hyperlink ×1
image ×1
reactjs ×1
svg ×1
vue.js ×1