javascript 使用CSS设置inner.html的样式

我曾经使用必须改变措辞的简历每当你点击一个按钮。

function myFunction(){
  document.getElementById("demo").innerHTML= " ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. r";
}

function myFunction2(){
  document.getElementById("demo").innerHTML = " EXPERIENCIA Proin et tortor ut lorem finibus enter image description hereblandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urnas.";
}

function myFunction3(){
  document.getElementById("demo").innerHTML = " ESTUDIOS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum am.";
}

function myFunction4(){
  document.getElementById("demo").innerHTML = " HABILIDADES Proin et tortor ut lorem finibus blandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urna. Duis eget dolor eros.";
}

<div class="text-center">
  <button class="button button1" type="button" onclick="myFunction()">ACERCA DE MI</button>
  <button class="button button2" type="button" onclick="myFunction2()">EXPERIENCIA </button>
  <button class="button button3" type="button" onclick="myFunction3()">ESTUDIOS </button>
  <button class="button button4" type="button" onclick="myFunction4()">HABILIDADES </button>
</div>

<p id="demo"><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">
  ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum euismod orci volutpat fringilla egestas. Etiam pellentesque orci sed risus rhoncus tempor. Cras molestie id turpis ac laoreet. Curabitur vel justo nunc. Maecenas eget ante tincidunt lorem fermentum dapibus non in quam. orem ipsum dolor 
</p>

我怎样才能对点击按钮后出现的新文本设置样式呢？我不知道如何将inneHTML链接到CSS，并能够更改字体、大小和在句子之间添加空格。谢谢!
how it looks so far. I want to create paragraphs with the text
我试着在inner.html中添加标签，但这会破坏链接，因此我只使用de样式。
标签来强制使其成为现在的样子，但不足以将其更改为段落

请注意，您的代码也删除了<p>元素中的图像。
你能做的就是，根据点击的按钮，添加一个不同的css类，并为它定义一个样式，简化后，它看起来像这样：

<script>
  function myFunction() {
    let element = document.getElementById('demo');
    element.classList = ['style1'];
    element.innerHTML = 'new red inner text';
  }

  function myFunction2() {
    let element = document.getElementById('demo');
    element.classList = ['style2'];
    element.innerHTML = 'new green inner text';
  }
</script>

<style>
  .style1 {
    color: #FF0000;
    font-weight: bold;
  }
  
  .style2 {
    color: #00FF00;
    font-weight: bold;
  }
</style>

<div class="text-center">
  <button class="button button1" type="button" onclick="myFunction()">Button 1</button>
  <button class="button button2" type="button" onclick="myFunction2()">Button 2</button>

</div>

<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow"> <span id="demo">Inner Text </span>
</p>

javascript 使用CSS设置inner.html的样式

1条答案

相关问题

热门标签

最新问答