How to reload or refresh the CSS of the page with Javascript

Asked

Viewed 804 times

3

I made a code that should generate several inputs:

var n = document.getElementById("numeroCamadas").value
    var ttt;

    var layers = {}
    for (var i =0; i<n; i++){

        layers["layer" + i] = { 
        'espessura':0 ,
        'altura':0 ,
        'pesoEspecifico':0,
        'tensaoHorizontal':0,
        'poroPressao':0,
        'tensaoTotal':0,
        'tensaoTotalMeio':0,
        'tensaoTotalEfetiva':0,
        'tensaoTotalEfetivaMeio':0};




        ttt +="<li class=\"ui-field-contain\">"

            +"<h5>Camada "+(i+1)+"</h5>"
            +"<div style=\"float:left; width:30%;\">"
            +"<input type=\"number\" placeholder=\"Altura"+(i+1) +"\" value=\"\" id=\"altura"+(i+1) +"\" onfocusout=\"tensao()\">"
            +"</div>"
            +"<div style=\"float:left; width:30%;\">"
            +"<input type=\"number\" placeholder=\"Peso Especifico"+(i+1) +"\" value=\"\" id=\"pesoEspecifico"+(i+1) +"\" onfocusout=\"tensao()\">"
            +"</div>"
            +"<div style=\"float:left; width:30%;\">"
            +"<input type=\"number\" placeholder=\"Tensão Horizontal"+(i+1) +"\" value=\"\" id=\"geraCamadasHorizontal"+(i+1) +"\" onfocusout=\"tensao()\">"
            +"</div>"
            +"<br>"
            +"<li>Espessura da Camada:<b id=\"espessuraCamada"+(i+1) +"\"></b></li>"
            +"<li>Tensão Total:<b id=\"uMedia\"></b></li>"
            +"<li>Tensão Efetiva:<b id=\"fc\"></b></li><br>"
            +"</li>"




    }


    document.getElementById("camadas").innerHTML=ttt
}

The code works, but everything it generates doesn’t come with CSS, which is the CSS of jquery.mobile-1.4.5.min.css.

Is there a function to reject CSS or something like that???

I’ve been advised to do this: 

$(".ui-field-contain").css("border-bottom-width","1px");
$(".ui-field-contain").css("border-bottom-right-radius","inherit");
$(".ui-field-contain").css("border-bottom-left-radius","inherit");
$(".ui-field-contain").css("border-top-left-radius","inherit");
$(".ui-field-contain").css("padding","0.7em 1em");
$(".ui-field-contain").css("border-right-width","1px");
$(".ui-field-contain").css("border-left-width","1px");
$(".ui-field-contain").css("border-width","1px 0 0");
$(".ui-field-contain").css("border-style","solid");
$(".ui-field-contain").css("margin","0");
$(".ui-field-contain").css("display","block");
$(".ui-field-contain").css("position","relative");
$(".ui-field-contain").css("text-align","left");
$(".ui-field-contain").css("text-overflow","ellipsis");
$(".ui-field-contain").css("overflow","hidden");
$(".ui-field-contain").css("white-space","nowrap");
$(".ui-field-contain").css("background-color","white");
$(".ui-field-contain").css("border-color","#ddd");
$(".ui-field-contain").css("color","#333");
$(".ui-field-contain").css("text-shadow","0 1px 0 #f3f3f3");
$("input").css( "margin" , "0" );
$("input").css( "min-height" , "2.2em" );
$("input").css( "text-align" , "left" );
$("input").css( "border-radius" , "5px" );
$("input").css( "background" , "transparent none" );
$("input").css( "line-height" , "1.4em" );
$("input").css( "display" , "block" );
$("input").css( "width" , "auto" );
$("input").css( "box-sizing" , "border-box" );
$("input").css( "outline" , "0" );

$("input").css( "color" , "inherit" );
$("input").css( "text-shadow" , "inherit" );
$("input").css( "font-size" , "1em" );
$("input").css( "font-family" , "sans-serif" );

$("#cfc").css( "margin-left" , "5em" );

But it’s a lot of work, and it’s not giving a good result.

Follow index as requested

Soil Stresses

Menu 

<div role="main" class="ui-content">

    <ul data-role="listview" data-inset="true">
        <li class="ui-field-contain">
            <label style="width:3em; float:left;">Número de Camadas</label> 
            <div style="float:right; width:30%;">
                <input type="number" value="2" id="numeroCamadas" onfocusout="()">
            <button onclick="geraCamadas()">Gerar Camadas</button>
            </div>

        </li>
    </ul>


    <ul data-role="listview" data-inset="true" id="camadas">
        <li class="ui-field-contain">
            <h5>Camada 1</h5>
            <div id="cfc" style="float:left; width:30%;">
                <input type="number" placeholder="Altura" value="" id="altura1" id="put" onfocusout="">
            </div>
            <div id="cfc" style="float:left; margin-left: 0.5em; width:30%;">
                <input type="number" placeholder="Peso Espeçifico" value="" id="PesoEspecifico1" onfocusout="tensao()">
            </div>
            <div id="cfc" style="float:left; margin-left: 0.5em; width:30%;">
                <input type="number" placeholder="Tensão Horizontal" value="" id="TensaoHorizontal" onfocusout="tensao()">
            </div><br>
        </li>




        <li>Umidade média:<b id="uMedia"></b></li>
        <li>Fator Correção:<b id="fc"></b></li>
    </ul>




</div>

<div data-role="footer">
    <h4>Page Footer</h4>



</div><!-- /footer -->
</body>
javascript css
  • 4

    I strongly advise against doing this... CSS should work even for elements added later. The problem has to be elsewhere. You can add the HTML you have?

  • Insert the index

  • Can you modify this jsFiddle to show your problem? -> http://jsfiddle.net/f108qwc2/

  • I did everything to make it work in the fiddle, but there is worse, not loaded anything, not css, not my javascript funf

  • I don’t know how jquery-mobile works. But does it not use classes for that? Otherwise it would just be assigning classes instead of style by style.

  • You should solve this by adding classes to the HTML elements

  • 1

    Seeing this question Forcing jQuery Mobile to re-evaluate Styles/Theme on dynamically inserted content, maybe you just need to make one $("#camadas").trigger("create").

Show 2 more comments

3 answers

0

after popular your layers, try calling the .trigger('create') about the same.

var tmplCamada = document.getElementById("tmplCamada").content;
var numeroCamadas = document.getElementById("numeroCamadas");
var geraCamadas = document.getElementById("geraCamadas");
var camadas = document.getElementById("camadas");

var onTensaoFocusOut = function (event) {

}

geraCamadas.addEventListener("click", function (event) {
  var limite = parseInt(numeroCamadas.value);
  var indice = 0;
  var layers = {}

  for (;indice < limite; indice++) {
    layers["layer" + indice] = { 
      'espessura':0 ,
      'altura':0 ,
      'pesoEspecifico':0,
      'tensaoHorizontal':0,
      'poroPressao':0,
      'tensaoTotal':0,
      'tensaoTotalMeio':0,
      'tensaoTotalEfetiva':0,
      'tensaoTotalEfetivaMeio':0
    };

    var camada = document.importNode(tmplCamada, true);
    var titulo = camada.querySelector("h5");
    var elementos = camada.querySelectorAll("[id]");

    titulo.textContent += (indice + 1);
    [].forEach.call(elementos, function (element) {
      element.id += (indice + 1);
      if (element.tagName == "INPUT") {
        element.placeholder += (indice + 1);
        element.addEventListener("focusout", onTensaoFocusOut);
      };    
    });

    camadas.appendChild(camada);
    
    //aqui está o pulo do gato!
    $(camadas).trigger("create");
  }
});
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page">
  <div data-role="header">
    <h1>Page Header</h1>
  </div>

  <div role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">
      <li class="ui-field-contain">
        <label style="width:3em; float:left;">Número de Camadas</label> 
        <div style="float:right; width:30%;">
          <input type="number" value="2" id="numeroCamadas">
          <button id="geraCamadas">Gerar Camadas</button>
        </div>
      </li>
    </ul>
    <ul data-role="listview" data-inset="true" id="camadas">

    </ul>
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
<template id="tmplCamada">  
  <li class="ui-field-contain">

    <h5>Camada </h5>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Altura" value="" id="altura" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Peso Especifico" value="" id="pesoEspecifico" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Tensão Horizontal" value="" id="geraCamadasHorizontal" />
    </div>
    <br>
  </li>
  <li>Espessura da Camada:<b id="espessuraCamada"></b></li>
  <li>Tensão Total:<b id="uMedia"></b></li>
  <li>Tensão Efetiva:<b id="fc"></b></li><br>

</template>

As I could not do jQuery Mobile in the Snippet from here from the OS-pt, then follows the same code above on Jsfiddle

0

after popular your layers, try calling the .trigger('create') about the same.

var tmplCamada = document.getElementById("tmplCamada").content;
var numeroCamadas = document.getElementById("numeroCamadas");
var geraCamadas = document.getElementById("geraCamadas");
var camadas = document.getElementById("camadas");
var layers = {};

var onTensaoFocusOut = function (event) {

}

geraCamadas.addEventListener("click", function (event) {
  var itens = camadas.querySelectorAll(".ui-field-contain");
  var limite = parseInt(numeroCamadas.value);
  var indice = itens.length;

  if (indice != limite) {
    if (indice < limite) {
      for (;indice < limite; indice++) {
        layers["layer" + indice] = { 
          'espessura':0 ,
          'altura':0 ,
          'pesoEspecifico':0,
          'tensaoHorizontal':0,
          'poroPressao':0,
          'tensaoTotal':0,
          'tensaoTotalMeio':0,
          'tensaoTotalEfetiva':0,
          'tensaoTotalEfetivaMeio':0
        };

        var camada = document.importNode(tmplCamada, true);
        var titulo = camada.querySelector("h5");
        var elementos = camada.querySelectorAll("[id]");

        titulo.textContent += (indice + 1);
        [].forEach.call(elementos, function (element) {
          element.id += (indice + 1);
          if (element.tagName == "INPUT") {
            element.placeholder += (indice + 1);
            element.addEventListener("focusout", onTensaoFocusOut);
          };    
        });
        camadas.appendChild(camada);
      }      
    } else {
      for (indice--;indice >= limite; indice--) {
        delete layers["layer" + indice];
        for (var prox = 0; prox <= 3;) {
          camadas.removeChild(itens[indice].nextSibling);
          if (itens[indice].nextSibling.nodeType == 1) {
            prox++
          }
        }
        camadas.removeChild(itens[indice]);
      }
    }
    //aqui está o pulo do gato!
    $(camadas).trigger("create");
  }
});
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page">
  <div data-role="header">
    <h1>Page Header</h1>
  </div>

  <div role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">
      <li class="ui-field-contain">
        <label style="width:3em; float:left;">Número de Camadas</label> 
        <div style="float:right; width:30%;">
          <input type="number" value="2" id="numeroCamadas">
          <button id="geraCamadas">Gerar Camadas</button>
        </div>
      </li>
    </ul>
    <ul data-role="listview" data-inset="true" id="camadas">

    </ul>
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
<template id="tmplCamada">  
  <li class="ui-field-contain">

    <h5>Camada </h5>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Altura" value="" id="altura" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Peso Especifico" value="" id="pesoEspecifico" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Tensão Horizontal" value="" id="geraCamadasHorizontal" />
    </div>
    <br>
  </li>
  <li>Espessura da Camada:<b id="espessuraCamada"></b></li>
  <li>Tensão Total:<b id="uMedia"></b></li>
  <li>Tensão Efetiva:<b id="fc"></b></li><br>

</template>

As I could not do jQuery Mobile in the Snippet from here from the OS-pt, then follows the same code above on Jsfiddle

0

You can change the css dynamically, there is something very conventional, but you can do something like:

function alterar(valor){
  switch(valor){
    case "1":
      document.getElementById("main-css").href = "http://templated.co/items/demos/retrospect/assets/css/main.css";
      break;
    case "2":
      document.getElementById("main-css").href = "http://templated.co/items/demos/typify/assets/css/main.css";
      break;
    case "3":
      document.getElementById("main-css").href = "https://jquerymobile.com/jquery-wp-content/themes/jquerymobile.com/style.css";
      break;
    case "4":
      document.getElementById("main-css").href = "";
      break;
    default:break;
  }
}
<link id="main-css" rel="stylesheet" href="https://jquerymobile.com/jquery-wp-content/themes/jquerymobile.com/style.css">

Alterar o tema: 
<select id="selecione" onchange="alterar(this.value)">
  <option value="1">retrospect</option>
  <option value="2">typify</option>
  <option value="3">jquery-mobile</option>
  <option value="4">default</option>
</select>

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true">
    <li class="ui-field-contain">
      <label style="width:3em; float:left;">Número de Camadas</label>
      <div style="float:right; width:30%;">
        <input type="number" value="1" id="numeroCamadas" onfocusout="()">
        <button onclick="geraCamadas()">Gerar Camadas</button>
      </div>
    </li>
  </ul>
  <ul data-role="listview" data-inset="true" id="camadas">
    <li class="ui-field-contain">
      <h5>Camada 1</h5>

      <div id="cfc" style="float:left; width:30%;">
        <input type="number" placeholder="Altura" value="" id="altura1" id="put" onfocusout="">
      </div>
      <div id="cfc" style="float:left; margin-left: 0.5em; width:30%;">
        <input type="number" placeholder="Peso Espeçifico" value="" id="PesoEspecifico1" onfocusout="tensao()">
      </div>
      <div id="cfc" style="float:left; margin-left: 0.5em; width:30%;">
        <input type="number" placeholder="Tensão Horizontal" value="" id="TensaoHorizontal" onfocusout="tensao()">
      </div>
      <br>
    </li>
    <li>Umidade média:<b id="uMedia"></b>

    </li>
    <li>Fator Correção:<b id="fc"></b>

    </li>
  </ul>
</div>
<div data-role="footer">
  <h4>Page Footer</h4>
</div>

Obs: I don’t know if it’s good or bad practice to assign an id to a link element, but it’s something you can do.

Notice I’m assigning one id to a single element link, and I’m changing the template css according to the selected by the user, if you want to call again your css, just you add the line document.getElementById("id_do_link").href = "caminho_do_seu_css.css";

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.