将 CSS 添加到 Javascript 小部件

Adding CSS to a Javascript Widget

本文关键字：小部 Javascript CSS 添加      更新时间：2023-09-26

我正在开发一个Javascript小部件供其他网站使用。我有 2 个 javascript 和一个 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 加载到标签中。我该怎么做？

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

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

首先像这样进入 HTML 页面

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

第二个有页面并将其包含在像这样的
HTML 页面中页面保存名称"工作表.css"
并在像这样关闭头部之前包含它

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

JS页面的最后一种方法是这样的

$("body").css("background-color","#CC0000");
相关文章：