Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rogerio machado

[Resolvido] juntar um novo conjunto css com <style> defin

Recommended Posts

Gostaria de carregar meu próprio conjunto de css numa página, porém sem sucesso, acredito que seja por causa da biblioteca javascript fornecida pelo facebook, pois ela abre e fecha a tag <style> por si só

 

tentei carregar meu conjnto com <link .....> antes de chamar a tal biblioteca e também em outra tentativa, criando outra tag <style @import....>

 

mas somente o estilo do facebook é processado

 

fato que me chamou atenção:

 

quando usei <link .....> os seletores que NÃO tinham id nem class eram "processados".

 

Como carregar meu conjunto de css nessa condição? (a de não alterar o script do facebook, não entendo bulhufas de javascript)

reparem que o script é colocado depois de <body>, isso não é erro meu, é recomendação do facebook, ainda assim a informação que ele cria é colocada no local correto.

<html>
 <head>
   <title>ci.rogerio-desktop</title>
   <link href="http://static.rogerio-desktop/styles/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <div id="fb-root"></div>
   <script>
     window.fbAsyncInit = function() {
       FB.init({
         appId   : '<?php echo $facebook->getAppId(); ?>',
         session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
         status  : true, // check login status
         cookie  : true, // enable cookies to allow the server to access the session
         xfbml   : true // parse XFBML
       });

       // whenever the user logs in, we refresh the page
       FB.Event.subscribe('auth.login', function() {
         window.location.reload();
       });
     };

     (function() {
       var e = document.createElement('script');
       e.src = document.location.protocol + '//connect.facebook.net/pt_BR/all.js';
       e.async = true;
       document.getElementById('fb-root').appendChild(e);
     }());
   </script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estude sobre especificidade.

 

provavel que o script esteja jogando css inline nos elementos

dai, só com javascript você conseguiria alterar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

antes

document.getElementById('fb-root').appendChild(e);
     }());

 

depois

document.getElementById('fb-root').appendChild(e);
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.media = 'all';
css.href = 'endereçodocssaqui';
document.getElementsByTagName('head').item(0).appendChild(css);
     }());

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO

 

A resposta de Evandro Oliveira resolveu o problema ...

 

Pelo visto tudo é a partir de document.createElement('algo');

 

usando esse recurso dá pra preencher/modificar qualquer coisa em <head>?

dá pra usar em qualquer elemento html?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tecnicamente, dá pra criar qualquer elemento. A manipulação e inserção vai por conta do programador. Deve-se prestar atenção para elementos de corpo no cabeçalho e vice-versa.

 

Note, também, que é necessário configurar todos os parâmetros antes do comando appendChild.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.