Question

我正在我的学校网页上工作，我试图在一个div中选择所有标题元素，并使用一个名为＆＃34; text＆＃34;使用querySelector（String）函数 - 然后更改标题背景，边框和文本颜色，但以下代码似乎无法正常工作

var test = "content.html #test"
$(document).ready(function()
{
    $.ajax(
    {
        success : function(data)
        {                   
            $("#content").load(test); //this works - loads <div id="test"> and all elements within it from content.html
            document.querySelector(".content").style.backgroundColor = "#CCFFCC"; //this works - exists inside main html file ( $(document) )
            document.querySelector(".text h1").style.backgroundColor = "#CCFFCC"; //this doesn't work - still loading default colour from css
            document.querySelector(".text h1").style.color = "#003300"; //this doesn't work - still loading default colour from css

//Appropriate close tags follow...

你知道我做错了吗？我是以错误的方式引用我的元素吗？或者它是否与我尝试从单独的文件动态加载此内容的事实有关？或完全不同的东西？

Answer 1

正如Klaster_1所暗示的那样，您需要利用load的回调功能。

$('#content').load(test, function() {
    document.querySelector(".content").style.backgroundColor =    "#CCFFCC";
    document.querySelector(".text h1").style.backgroundColor = "#CCFFCC"; 
    document.querySelector(".text h1").style.color = "#003300"; 
});

当Klaster_1说出“异步”时，他的意思是什么？操作是它与DOM的呈现不同步。换句话说，在浏览器的运行循环有机会实际将内容放在页面上之前，将运行代码样式化内容。

document.querySelector（＆＃34; .class h1＆＃34;）

1 个答案: