下面是我包含的Jquery插件文件生成的模式中的html:
<div class="photobooth">
<div class="blind"></div>
<canvas ></canvas>
<div class="warning notSupported"></div>
<div class="warning noWebcam"></div>
<ul>
<li title="hue" class="hue"></li>
<li title="saturation" class="saturation"></li>
<li title="brightness" class="brightness"></li>
<li title="crop" class="crop"></li>
<li title="take picture" class="trigger"></li>
</ul>
</div>
我一直在使用下面的代码在运行时为我的标签添加一个id:
var ul = document.querySelector('.photobooth > ul');
ul.id = 'someId';
但它抛出了一个错误:
Uncaught TypeError: Cannot set property 'id' of null myid.js? njl6m7:190 (anonymous function)
我该怎么做才能在标签中添加id?我怀疑在执行脚本代码时,还没有加载模态html。有人能帮我吗?
我不太确定所有的细节,但我所做的是复制了您的代码,并包含了一个带有JavaScript的脚本标记。所以HTML看起来是这样的:
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<div class="photobooth">
<div class="blind"></div>
<canvas ></canvas>
<div class="warning notSupported"></div>
<div class="warning noWebcam"></div>
<ul>
<li title="hue" class="hue"></li>
<li title="saturation" class="saturation"></li>
<li title="brightness" class="brightness"></li>
<li title="crop" class="crop"></li>
<li title="take picture" class="trigger"></li>
</ul>
</div>
</body>
</html>
JavaScript文件(main.js
)如下所示:
var ul = document.querySelector('.photobooth > ul');
ul.id = 'someId';
为了解决您的问题,我将<script>
标记移到了<body>
标记的底部。这将在主体加载后运行main.js
,如下所示:
<html>
<head>
</head>
<body>
<div class="photobooth">
<div class="blind"></div>
<canvas ></canvas>
<div class="warning notSupported"></div>
<div class="warning noWebcam"></div>
<ul>
<li title="hue" class="hue"></li>
<li title="saturation" class="saturation"></li>
<li title="brightness" class="brightness"></li>
<li title="crop" class="crop"></li>
<li title="take picture" class="trigger"></li>
</ul>
</div>
<script src='main.js'></script>
</body>
</html>
根据我的理解,jQuery相当于将script标记放在正文的末尾,它使用$(document).ready(callback)
或$(window).load(callback)
,它们做不同的事情。
不同之处在于:$(document).ready
等待DOM加载,但不等待任何图形(图像等),而$(window).load(callback)
等待一切完成。因此,如果您想使用其中任何一个,您的main.js
文件将变为:
$(document).ready(function() {
var ul = document.querySelector('.photobooth > ul');
ul.id = 'someId';
});
并且您的脚本标记将在CCD_ 10标记中。希望能成功!
我刚刚弄清楚你使用的是哪个插件。。。
由于您使用的是jQuery,因此可以执行以下操作:
$('#example').photobooth();
$('.photobooth > ul').attr('id', 'someId');
这将把该ID应用于加载时生成的photobooth小部件中的第一个ul。(其中"#example"是您的摄影棚小部件的容器ID)
jsfiddle演示