Question

我可以通过jquery / javascript / html或客户端提供的任何其他技术为图像和CSS提供动态路径吗？以下是我的虚拟代码：

<html>
  my_constant_path = "/yes/I/got/this/"
 <head> 
 <link rel="stylesheet" href="<my_constant_path>" + "style.css"/> 
 </head>
 <body>
 <div>
   <img src= "<my_constant_path>" + "abc.png"/> 
 </div>
 </body>
</html>

我无法使用服务器端脚本。

Answer 1

如果您要将my_constant_path应用于所有图片/链接

您可以在head部分使用<base>元素，并通过JavaScript更改其href属性，如下所示：

<head>
  <meta charset="utf-8">
  <title>title</title>
  <base href="">
  <script>
    function setBaseURL(url) { 
      document.getElementsByTagName("base")[0].href = url;
    } 

    setBaseURL("http://placehold.it/");
  </script>
</head>

然后相对地输入元素的所有href / src属性：

<img src="200x150" alt="">

<强> WORKING DEMO

Answer 2

对于“纯粹的客户端”，使用JavaScript是唯一的方法。

<head>
  <link id="stylesheet1" rel="stylesheet" type="text/css" /> 
  <script>
    var my_constant_path = "assets/";
    $(function(){
      $("#stylesheet1").attr("href", my_constant_path + "style.css");
      $("#image1").attr("src", my_constant_path + "abc.png");
    });
  </script>
</head>
<body>
  <img id="image1"/> 
</body>

Answer 3

标准的前端脚本语言是JavaScript。要将其直接嵌入HTML，您需要在<script>元素内编写脚本。为你my_constant_path声明：

<script>
  var my_constant_path = "/yes/I/got/this/";
</script>

您可以使用document.write()在文档执行期间执行脚本并写入文档，但不能在标记内插入脚本元素（或任何其他类型的元素），因此无法动态插入{在my_constant_path和href属性中{1}}：您需要编写整个标记：

src

...或等待标签已经渲染，然后改变它们的属性：

<head>
  <script>
    document.write( '<link rel="stylesheet" href="' + my_constant_path + '"style.css"/>' );
  </script>
</head>

我可以纯粹在客户端为图像和CSS提供动态路径吗？

3 个答案: