Question

我需要将内联CSS转换为外部CSS，有人知道怎么做吗？如何分隔html和css并将它们插入div-html和div-css。

例如：

从此：

#include <sys/socket.h>
#include <sys/types.h>
#include <netinet/in.h>
#include <netdb.h>
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <errno.h>
#include <arpa/inet.h>
#include <ctype.h>

void error(const char* es)
{
    fprintf(stderr, "Error: %s\n", es);
    exit(1);
}

struct addrinfo* getadrs(const char* name, const char* port)
{
    struct addrinfo hints, *p;
    int r;

    printf("getadr: begin\n");

    memset(&hints, 0, sizeof(hints));
    hints.ai_family = AF_INET6 /*AF_UNSPEC*/;
    hints.ai_socktype = SOCK_STREAM;
    hints.ai_protocol = IPPROTO_TCP;

    r = getaddrinfo(name, port, &hints, &p);
    if (r != 0)
        error(gai_strerror(r));

    printf("getadr: end\n");
    return p;
}

void* adrptr(struct sockaddr* addr)
{
    switch (addr->sa_family)
    {
        case AF_INET:
            return &(((struct sockaddr_in*)addr)->sin_addr);

        case AF_INET6:
            return &(((struct sockaddr_in6*)addr)->sin6_addr);
    }

    return NULL;
}

int main(int argc, char *argv[])
{
    int sockfd = -1, r;
    char buff[1024], addrstr[INET6_ADDRSTRLEN];
    struct addrinfo *serv_addrs, *addr;

    if (argc != 3)
    {
        printf("Usage: socket <server> <page>\n");
        exit(1);
    }

    printf("before address resolve\n");

    serv_addrs = getadrs(argv[1], "80");

    printf("after address resolve\n");

    for(addr = serv_addrs; addr != NULL; addr = addr->ai_next)
    {
        sockfd = socket(addr->ai_family, addr->ai_socktype, addr->ai_protocol);
        if (sockfd < 0)
            error("Could not create socket");

        printf("Address: %s\n", inet_ntop(addr->ai_family, adrptr(addr->ai_addr), addrstr, sizeof(addrstr)));

        r = connect(sockfd, addr->ai_addr, addr->ai_addrlen);
        if (r == 0) break;

        close(sockfd);
        sockfd = -1;
    }

    if (sockfd < 0)
        error("Connect Failed");

    printf("after connect\n");

    /* send request */

    sprintf(buff, "GET %s HTTP/1.1\r\n", argv[2]);
    write(sockfd, buff, strlen(buff));
    sprintf(buff, "Host: %s\r\n", argv[1]);
    write(sockfd, buff, strlen(buff));
    sprintf(buff, "%s", "Connection: close\r\n\r\n");
    write(sockfd, buff, strlen(buff));

    do
    {
        r = read(sockfd, buff, sizeof(buff));
        if (r <= 0) break;
        printf("%.*s", r, buff);
    }
    while (true);

    close(sockfd);
    return 0;
}

对此：

<div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>

<div id="one">Div one</div>

这是它的外观：

#one{
    background-color:green;
    width:50px;
    height:50px;
}

<div id="container"
    <div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>
    <div id="two" style="background-color:red;width:150px;height:150px;">
          <div id="three" style="background-color:blue;width:50px;height:50px;">Div three</div>
    </div>
</div>

<div id="html"></div>
<div id="css"></div>
<button onclick="myFunction()" >click</button>

Answer 1

也许是这样吗？

let style = '';

function myFunction() {
  document.querySelectorAll('div').forEach(e => {
    if (e.getAttribute('style')) {
      style += `
    #${e.getAttribute('id')}{${formatStyle(e.getAttribute('style'))}
    }`;
      e.removeAttribute('style');
    }
  });
  document.querySelector('#css').innerHTML = style;
  createStyleTag(style);
}

function formatStyle(style) {
  let tmp = '';
  let styles = style.split(';');
  styles.forEach(e => {
    if (e)
      tmp += `
       ${e};`;
  })
  return tmp;
}

function createStyleTag(css) {
  var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

  head.appendChild(style);

  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

#css {
  white-space: pre;
}

<div id="container">
  <div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>
  <div id="two" style="background-color:red;width:150px;height:150px;">
    <div id="three" style="background-color:blue;width:50px;height:50px;">Div three</div>
  </div>
</div>

<div id="html"></div>
<div id="css"></div>
<button onclick="myFunction()">click</button>

将内联CSS转换为外部CSS

1 个答案: