javascript - 将 CSS 添加到 Javascript 小部件

Question

我正在开发一个 Javascript 小部件供其他网站使用。我有 2 个 javascript 和 1 个 php 文件。一个 Javascript 供用户使用，另一个用于发出 JSON 请求，而 php 则用于挖掘数据。一切运行良好，数据也正在显示。

现在我需要向小部件添加 CSS。我不希望用户在他们这边编写 CSS 代码。我该怎么做？我需要所有内联 CSS 代码吗？或者在 javascript 中附加 css 文件？

我知道这是非常基本的。但是，我对这些东西并不熟悉。所以，如果你们给我指明了正确的方向，那就太好了。我也需要示例代码。我查了很多网站。他们只有 JavaScript 代码。

谢谢!

    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;
?>

现在我需要将 css 加载到标签中。我该怎么做？

Answer 1

您可以通过 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);