2

I am developing a Javascript widget for other websites to consume. I have 2 javascripts and one php file. One Javascript for user to consume and other to make a JSON request and the php to digg the data. Things are working great and data is being displayed, as well.

Now I need to add CSS to the widget. I don't want the users to code the CSS in their side. How do I do it? Do I need code all inline css? or Append a css file in the javascript?

I know this is very basic. But, I am not familiar with this stuff. So, if you guys point me to the right direction that would be great. I need the sample code as well. I checked many site. They simply have the javascript code.

Thanks! 

    End user Javascript
------------------------

<script type="text/javascript" src="http://mydomain.com/userwidget.js"></script>
<div id="results">
</div>
<script type="text/javascript">
ajax_get_my_data();
</script>

AJAX Javascripit
----------------

function ajax_get_my_data(){
    var results = document.getElementById("results");
    var hr = new XMLHttpRequest();
    hr.open("POST", "http://mydomain.com/widgets/userwidgetcore.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            results.innerHTML = "";
            for(var obj in data){
                results.innerHTML += data[obj].propertyA;
            }
        }
    }
    hr.send("var1=stock&var2=up");
    results.innerHTML = "requesting...";
}


PHP code
------------

<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
...........
Databse logic
.......

         $_out = '<table id=\"rounded-corner\">';
         $_out .= '<thead>';
         $_out .= '<tr>';
         $_out .= '<th colspan=\"3\" scope=\"col\" class=\"rounded-q6\">Stocks Under Accumulation</th>';
         $_out .= '</tr>';      
         $_out .= '<tr>';
     $_out .= '<th scope=\"col\" class=\"rounded-q5\">Ticker</th>';
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Price % Change</th>'; 
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Volume % Change</th>'; 
     $_out .= '</tr>';
        $_out .= '</thead>';
    $_out .= '<tbody>';

  ..............  
 ..................
$jsonData = $_out;
echo $jsonData;
?>

now I need to load the css to the tags. How do I do it?

4

2 回答 2

2

你可以通过javascript将它附加到页面的头部

var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "filename.css");
  document.getElementsByTagName("head")[0].appendChild(fileref);
于 2013-09-08T00:11:47.183 回答
1

我不明白你的想法，但 CSS 代码有 3 种方式

首先是这样的html页面

<head>
<title>hello</title>
<style type="text/css">
body
{
background-color: #CC0000;
}
</style>
</head>


第二个有页面并将其包含在 html 页面
中

<link rel="stylesheet" href="css/sheet.css" media="screen"/>

像这样来自js页面的最后一种方式

$("body").css("background-color","#CC0000");
于 2013-09-08T00:11:27.910 回答