用Python控制HTML元素樣式

一、Python控制HTML元素樣式概述

Python可以通過各類開源庫來控制HTML頁面元素的樣式，其中最流行的庫是BeautifulSoup和Selenium。使用這些庫，可以用代碼動態地改變網頁的樣式，定位元素並修改相關屬性。

兩者的使用場景不完全相同：BeautifulSoup 適合解析靜態HTML，對於需要交互的瀏覽器操作，則需要Selenium。

下面我們將分別介紹使用BeautifulSoup和Selenium控制HTML元素樣式的具體方法。

二、使用BeautifulSoup控制HTML元素樣式

使用BeautifulSoup解析HTML文件或URL，然後通過控制CSS屬性來改變元素的樣式。

首先，需要安裝BeautifulSoup庫：

pip install beautifulsoup4

示例代碼如下：

from bs4 import BeautifulSoup

html_doc = →示例HTML文檔

soup = BeautifulSoup(html_doc, 'html.parser')

# 通過改變元素的CSS屬性來改變樣式
div = soup.find('div', {'class': 'example'})
div['style'] = 'width:100px;height:100px;background-color:red;'

# 輸出HTML文檔
print(soup.prettify())

上述代碼通過修改一個class為example的div元素的屬性，使元素樣式改變。代碼執行後，將輸出一段字元串，其中被改變後的div元素會顯示為紅色、寬高均為100px。

三、使用Selenium控制HTML元素樣式

使用Selenium可以模擬瀏覽器的行為，定位元素和改變元素的CSS屬性。

首先，需要安裝Selenium庫：

pip install selenium

接下來，需要在本地安裝瀏覽器對應的WebDriver（本例使用Chrome瀏覽器，對應的WebDriver下載地址為：https://sites.google.com/a/chromium.org/chromedriver/downloads ）。下載完成後，將其放置於環境變數PATH中。

示例代碼如下：

from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_argument("--headless") # 靜默執行瀏覽器操作
driver = webdriver.Chrome(options=options)

driver.get(→示例URL)

# 定位元素並改變其CSS屬性
element = driver.find_element_by_class_name('example')
driver.execute_script("arguments[0].setAttribute('style','width:100px;height:100px;background-color:red;')", element)

# 輸出網頁HTML文檔
print(driver.page_source)

driver.quit()

上述代碼通過Selenium模擬打開了Chrome瀏覽器，同時訪問了一個URL。然後通過find_element_by_class_name()方法定位了一個class為example的元素，最後通過execute_script()方法改變了其CSS屬性。運行代碼後，控制的元素將變為紅色、寬高均為100px。

四、總結

Python可以使用BeautifulSoup和Selenium兩種庫來控制HTML元素的樣式，通過修改CSS屬性來實現。使用BeautifulSoup適合於解析靜態HTML，而Selenium適合於需要交互的瀏覽器操作。總的來說，Python是一種靈活、高效的控制頁面元素樣式的工具。