Javascript 要加载函数的不同目录_Javascript_Html_Jquery_Css

Javascript 要加载函数的不同目录

javascript html jquery css

Javascript 要加载函数的不同目录,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我使用jQuery加载函数来替换iframe，因为它只加载更好的部分它工作正常，但图像有问题，因为图像目录位于about.php页面中，我正在尝试从文件夹/editor.php访问它 About.php目录-images/img.jpg Editor.php目录-../images/img.jpg Editor.php-注意，我尝试在这个页面上使用不同的目录 <style> .content-page .hero { height: 250px; bac

我使用jQuery加载函数来替换iframe，因为它只加载更好的部分

它工作正常，但图像有问题，因为图像目录位于

about.php

页面中，我正在尝试从

文件夹/editor.php

访问它

About.php目录-images/img.jpg

Editor.php目录-../images/img.jpg

Editor.php-注意，我尝试在这个页面上使用不同的目录

<style>
  .content-page .hero {
      height: 250px;
      background-image: url("../images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      flex-direction: column;
  }
</style>
  <div id="iframe"></div>
  <script>
    $('#iframe').load('../about.php #content');
  </script>


.内容页.英雄{
高度：250px；
背景图像：url（“../images/header-background.jpg”）；/*url（“/images/headers/header-background.jpg”）*/
背景重复：无重复；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}
$（'#iframe'）.load（'../about.php#content'）；

About.php

<div id="content">
<style>
    .content-page .hero {
        height: 250px;
        background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
</style>

<!-- Content goes here -->

</div>


.内容页.英雄{
高度：250px；
背景图像：url（“images/header-background.jpg”）；/*url（“images/headers/header-background.jpg”）*/
背景重复：无重复；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}

加载函数开始运行后，如何更改css图像源属性？

您实际上做了两个问题：如何更改样式，以及在执行加载后如何更改样式。关于第一种，有几种方法。关于第二个，您可以使用

回调

参数，第三个

$.load

参数

从你发布的代码来看，似乎你实际上不想更改背景图像，似乎你想保持原样，只是因为目录问题

最干净的解决方案是编写一个

.css

文件并将其包含在两个页面中，而不是在页面中以相同的内容传播

元素

另一种解决方案是使用绝对路径而不是相对路径：

/images/header background.jpg

（如果图像目录位于web服务器的根目录中），而不是

images/header background.jpg

或

。/images/header background.jpg

如果您严格地需要保持这种体系结构，那么如下更改

About.php

可能是另一种可能的解决方案

<style>
    .content-page .hero {
        height: 250px;
        background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
</style>
<div id="content">

<!-- Content goes here -->

</div>


.内容页.英雄{
高度：250px；
背景图像：url（“images/header-background.jpg”）；/*url（“images/headers/header-background.jpg”）*/
背景重复：无重复；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}

您实际上做了两个问题：如何更改样式，以及在执行

$.load

后如何更改样式。关于第一种，有几种方法。关于第二个，您可以使用

回调