css 使用javascript更改特定页面url的模态中的文本

zpjtge22 于 2022-12-15 发布在 Java

关注(0)|答案(3)|浏览(127)

我是javascript的新手，想知道如何解决下面的问题。
在我的投资组合网站上，每个项目都有自己的页面。
我有一个叫做<button> information </button>的按钮。这个按钮显示在每一页上，当你点击它时会打开一个模态。模态包含了你当前看到的项目的信息，例如标题，年份和工作概念。它都在一个叫做<div class="modal-content" id="content">的类中。
为了使它工作，我添加了一些javascript行，它只是工作得很好。然而，我现在我希望<div class="modal-content" id="content">内的所有文本都能改变，这取决于我当前所在的项目页面。
有什么办法可以做到这一点吗？
期待任何有用的提示：）

<div class="modal">

 <div class="header">
  <div class="title" id="title">approaching visual</div>
  <div class="year" id="year">2022</div>
  <div class="modal-close">  &times;</div>
 </div>

 <div class="modal-content" id="content">
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Iste libero facilis magni iure quae saepe suscipit assumenda quis
  deserunt quasi voluptate voluptatum quo repellendus consequatur,
  eveniet impedit ratione! Repellendus, in? </p>
 </div>

</div>






if (window.location="http://anywebadress.com/amazing-project-2") {
 
    title.textContent = "new project-title";
    year.textContent = "new date";

  };

css

来源：https://stackoverflow.com/questions/74768112/change-text-inside-a-modal-for-specific-page-url-using-javascript

3条答案

按热度按时间

ycggw6v21#

这里有3个最好的方法来覆盖任何HTML元素中的数据，这取决于用例。
1.内部HTML：此属性设置并返回具有新HTML内容的元素的内容。
1.内部文本：此属性返回除和元素外的所有元素的内容。返回的内容以纯文本形式显示，不带任何格式。
1.文本内容：此属性返回所有元素内带有样式的原始内容，但不包括HTML元素标记。
下面是三种方法的例子-

使用innerHTML更改内容-

let el = document.getElementById("content");
el.innerHTML = "And <strong> NOW </strong> the contents have been changed!";
console.log(el.innerHTML);

<div class="modal-content" id="content"></div>

使用innerText更改内容-

一个二个一个一个

**使用文本内容-**更改内容

let el = document.getElementById("content");
el.textContent = "And <strong> NOW </strong> the contents have been changed!";
console.log(el.textContent);

<div class="modal-content" id="content"></div>

对于您的情况，如果希望更新整个模态的HTML，我建议使用innerHTML;如果只希望更新文本，我建议使用innerText。

赞(0）回复(0）举报 2022-12-15

4c8rllxm2#

使用querySelector访问elementById的textContent。

var content = document.getElementById("content")
content.querySelector(".title").textContent = title.textContent
content.querySelector(".year").textContent = year.yearContent

赞(0）回复(0）举报 2022-12-15

6uxekuva3#

// Select the given div
const content = document.getElementById("content") 

// *** now UPDATE ITS CONTENT ***

// 👉 if "title" and "year" are CLASSES. Use this bellow 👇
content.querySelector(".title").textContent = title.textContent
content.querySelector(".year").textContent = year.yearContent

// 👉 if "title" and "year" are IDs. Use this bellow 👇 
content.querySelector("#title").textContent = title.textContent
content.querySelector("#year").textContent = year.yearContent

赞(0）回复(0）举报 2022-12-15

我来回答

css 使用javascript更改特定页面url的模态中的文本

3条答案

相关问题

热门标签

最新问答