0

Suelo utilizar:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(function() {
    $('#ejemplo').load('ejemplo.html')
  });
</script>
<div id="ejemplo" style="color: black !important"></div>

para meter una sección en varias páginas y que al modificarla sólo tenga que editar una vez. En este caso, la sección tiene JS y CSS propios que quiero que sólo afecte a ese div, ya que si no modifica el resto de la página. ¿Sabéis cómo hacer para que el JS y el CSS sólo afecte a un elemento?

1 respuesta 1

0

Cuando quieres que solo afecte un elemento solo selecciónalo por un id ya que deben ser manejados como únicos lo obtienes con getElementById y lo almacenas en una variable así:

letidName = document.getElementById('id-name');

después solo tienes que modificar su CSS con JS así

idName.style.color = 'red';

ademas te dejo aqui una referencia a los diferentes metodos para acceder al DOM desde JS

Otra forma que podrías usar es usar una clase existente y ponérsela a un elemento para eso puedes usar el classList así:

idName.classList.add('name-class')

de esta forma solo los elementos que tengan la clase tendrán los estilos de la clase, dejo la doc aquí

teniendo esto en cuenta puedes hacer lo siguiente con este codigo de ejemplo donde tenemos lo siguiente

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>page</h1>
    <div id="ejemplo" style="color: black !important"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
    <script>
        $(function () {
            $('#ejemplo').load('./ejemplo.html')
        });
    </script>
</body>

</html>

y un archivo en el mismo path que es el que insertas.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2 id="lo-que-quiero">sjdlkfjsldkjf</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam itaque
        distinctio dignissimos corporis quidem tempore ex! Tenetur obcaecati,
        suscipit dolore saepe distinctio optio repellat asperiores molestias
        repellendus! Nisi, corrupti a!</p>
</body>

</html>

Ahora simplemente tienes que obtener el elemento porque ya cargo la page interna lo-que-quiero asi

const elementoQueQuiero = document.getElementById('lo-que-quiero');

ya de ahi depende de los estilos que quieras aplicar y como para eso están las referencias que deje al principio.

Nota: debes tener cuidado con las referencias ya que al ser sitio dentro de otro puede que el scope del padre cambie cosas del hijo así que asegura que sean únicos esos ID

7
  • El problema es que en el elemento que digo no puedo modificar el JS y CSS original ya que son externos como: cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js y maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/… ¿Se podría hacer en lo que se mete directamente? En ese caso, ¿podrías darme un ejemplo? No sabría cómo añadirlo para hacer lo que dices al meterlo en el código que os adjunté.
    – Mar
    el 18 ene. 2023 a las 18:12
  • Seria de gran ayuda que compartieras ese elemento o el código completo, que tipo es por lo menos o de donde viene ya que bootstrap tiene infinidad de elementos y sis puedes complétalo en la pregunta.
    – an-tet
    el 18 ene. 2023 a las 18:14
  • Básicamente tiene hojas de estilo y JS de Bootstrap desactualizados que al meterlo en la nueva página hace que se modifique por completo la página a la que se le añade. Te pasaría el link directamente de la página con el problema pero tengo entendido que en Stack Over Flow no se puede compartir ese tipo de cosas.
    – Mar
    el 18 ene. 2023 a las 18:17
  • cuando dices "la pagina" ,¿te refieres a un codeopen o a un sitio como tal?
    – an-tet
    el 18 ene. 2023 a las 18:24
  • 1
    Voy a tener que repasar algo de JS para hacer lo que me has dicho. Muchas gracias. Cuando lo resuelva te comento.
    – Mar
    el 18 ene. 2023 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.